我们可以在 html 中使用 js 变量名称作为 class 名称吗

Question

我想将 class 名称与变量计数连接起来，变量计数在每次单击按钮后不断更新，为此我收到错误消息“城市名称为空”。谁能推荐

button.addEventListener('click', resp => {
    count = count +1;
    var card = document.createElement('card');
    card.innerHTML = `
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  **<h5 class="card_title" + count></h5>
                  <h6 class="temp" + count></h6>
                  <p class="card-text" + count></p>**
                  <a href="#" class="btn-primary"></a>
                </div>
    `;
    card.className = 'card';
    var content = document.getElementById('id1');
    content.appendChild(card);
    **var citysName = document.querySelector('.card_title'+count);
    var description = document.querySelector('.card-text'+count);
    var temp = document.querySelector('.temp'+count);**
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputVal.value+'&appid=a5599c020b0d897cbc8b52d547289acc')
    .then(post => post.json())
    .then(data => {
        var cityName = data['name'];
        var temper = data['main']['temp'];
        var descrip = data['weather'][0]['description'];

        let ctemp = Math.round(temper-273);
        citysName.innerHTML = cityName;
        temp.innerHTML = ctemp + "°C";
        description.innerHTML = descrip;
    })
})

Answer 1

首先，这不是使用模板文字添加变量的方式，您可以在此处阅读更多相关信息： https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Template_literals

其次，当您刚刚创建可以使用 card 作为参考的元素时，为什么还要再次查询它，如果您需要其中的内容，使用您已有的变量访问它会容易得多除了在您的文档中寻找它

可能是这样的，但是如果没有更多的代码等就很难说

button.addEventListener('click', resp => {
    count = count +1;
    var card = document.createElement('card');
    card.innerHTML = `
                <img src="..." class="card-img-top" alt="...">
                <div class="card-body">
                  **<h5 class="card_title${count}"></h5>
                  <h6 class="temp${count}"></h6>
                  <p class="card-text${count}"></p>**
                  <a href="#" class="btn-primary"></a>
                </div>
    `;
    card.className = 'card';
    var content = document.getElementById('id1');
    content.appendChild(card);
    var citysName = card.querySelector('.card_title'+count);
    var description = card.querySelector('.card-text'+count);
    var temp = card.querySelector('.temp'+count);
    fetch('https://api.openweathermap.org/data/2.5/weather?q='+inputVal.value+'&appid=a5599c020b0d897cbc8b52d547289acc')
    .then(post => post.json())
    .then(data => {
        var cityName = data['name'];
        var temper = data['main']['temp'];
        var descrip = data['weather'][0]['description'];

        let ctemp = Math.round(temper-273);
        citysName.innerHTML = cityName;
        temp.innerHTML = ctemp + "°C";
        description.innerHTML = descrip;
    })
})

我们可以在 html 中使用 js 变量名称作为 class 名称吗

can we use js variable name as class name in html

html

javascript

css

web