Javascript JS中的html类替换无效

我正在尝试根据值更改或替换html类。例如，如果nsndalength=0，请将类名替换为badge success

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卖家和购买”按钮也应更改颜色。从上面的代码来看，我做错了什么

我们可以使用来打开/关闭一个类，使用第二个参数我们可以强制它打开/关闭

在这里，我们为项目提供一个唯一的id：

<span class="badge badge-primary" id="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)

---

代替className=使用myElement.classList.add'badge-success'@GetOffMyLawn您可以添加修改作为答案吗。我不确定如何使用您的建议修改代码，这是因为您使用的getElementById只会选择第一个。您可能需要使用唯一的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)