javascript - JS 中的 html 类替换不起作用

Question

我正在尝试根据值更改替换 html 类。例如，如果 nsndatalength = 0 将类名替换为徽章成功

function Awardstable(data) {

var container = document.getElementById('awardsTable');

data.forEach(function(awardsSnap) { // loop over all inventory
    var Items = awardsSnap.val();


    var nome = Items.Nomenclature;
    var NSN = Items.NSN;
    var AwardId = Items.Awardid;
    var AwrdDate = Items.Awarddate;
    var name = Items.Name;
    // var quant = Items.Qty;
    var cost = Items.Price;
    var key = awardsSnap.key;


    var NSNref = CatalogueDB.ref("NSNdata/" + NSN).orderByChild("NSN");

    if (NSNref) {

        // Attach an asynchronous callback to read the data at our posts reference
        NSNref.on("value", function(nsnshot) {


            if (nsnshot.val()) {
                var nsndatalength = Object.keys(nsnshot.val()).length;
            } else {

                nsndatalength = 0;

            }

            console.log(nsndatalength)
            console.log(nsnshot.val())


            var inventoryCard = `
                      <tr>
                                            <th scope="row">${NSN}</th>
                                            <td>${nome}</td>
                                            <td>${AwardId}</td>
                                            <td>${AwrdDate}</td>
                                            <td class="color-danger">${cost}</td>
                                            <td>

                                            <span class="badge badge-primary" id="sellerqty">${nsndatalength} Sellers</span>
                                            </td>
                                              <td><button type="button" class="btn btn-warning mb-1" id="buymodalbtn" data-toggle="modal" data-target="#buyModal" onclick="buyModal('${NSN}')">
                      Buy
                  </button></td>
                                        </tr>


                    `;

            container.innerHTML += inventoryCard;


            if (nsndatalength == 0){

                var buybtn = document.getElementById('buymodalbtn')
                var qtymarker = document.getElementById('sellerqty')

                console.log("class",buybtn,qtymarker)


                document.getElementById("buymodalbtn").className = document.getElementById("buymodalbtn").className.replace
                  ( /(?:^|\s)btn-warning(?!\S)/g , 'btn-success' )

                  document.getElementById("sellerqty").className = document.getElementById("sellerqty").className.replace
                  ( /(?:^|\s)badge-primary(?!\S)/g , 'badge-success' )


            }

        })
    } else {
        nsndatalength = 0;
        console.log("No Awards Available")
    }

});

}

问题是该代码不适用于所有 inventoryCard。这是 html 的输出。最后一个商品 0 卖家和购买按钮也应该改变颜色。从上面的代码中我做错了什么？

Answer 1

我们可以使用classList.toggle要打开/关闭一个类，使用第二个参数我们可以强制它打开/关闭。

这里我们给该项目一个唯一的ID:

<span class="badge badge-primary" id="sellerqty-${AwardId}">

然后选择它:

document.getElementById(`sellerqty-${AwardId}`)

在您的代码中，通过为项目提供唯一的 ID，它看起来会像这样:

var inventoryCard = `
<tr>
  <th scope="row">${NSN}</th>
  <td>${nome}</td>
  <td>${AwardId}</td>
  <td>${AwrdDate}</td>
  <td class="color-danger">${cost}</td>
  <td>
    <span class="badge badge-primary" id="sellerqty-${AwardId}">${nsndatalength} Sellers</span>
  </td>
  <td>
    <button type="button" class="btn btn-warning mb-1" id="buymodalbtn" data-toggle="modal" data-target="#buyModal" onclick="buyModal('${NSN}')">Buy</button>
  </td>
</tr>`;

// Add it before we call getElementById
container.innerHTML += inventoryCard;

document.getElementById(`sellerqty-${AwardId}`).classList.toggle('badge-success', nsndatalength == 0)