如何根据API返回的1-5数值为前N个星级a标签添加active类

实现方案 #

直接在拼接卡片HTML模板阶段动态给对应数量的星级标签加active类即可，无需额外操作已插入的DOM，执行效率更高。
默认API返回的每个商品对象item中存储1-5分的字段为rating，可根据你实际的字段名自行替换，同时代码做了边界兼容：评分<1时无高亮，>5时全量高亮。

修改后的完整代码如下：

let url = "http://localhost:3000/api/hygiene";
let main = document.querySelector(".insert");
let cardData = "";
/*get request*/
fetch(url)
  .then(res => res.json())
  .then(data => {
    data.forEach(function(item,index){
      // 处理评分边界
      const rate = Math.min(Math.max(item.rating, 0), 5);
      cardData += `
        <div class="card my-2 mx-2 product_card" style="width: 18rem;">
          <img src="http://localhost:3000/product/${item.image[0].filename}" class="card-img-top" alt="...">
          <div class="card-body">
            <h5 class="card-title">${item.title}</h5>
            <h6 class="card-subtitle mb-2 text-muted">${item.category}</h6>
            <div class="rate">
              ${Array.from({length:5}, (_, i) => `<a href="#!" class="${i < rate ? 'active' : ''}">★</a>`).join('')}
            </div>
            <p class="card-text">${item.sortDescription}</p>
          </div>
          <div class="card-body d-flex">
            <div class="price">
              <span class="before">₹${item.before}</span>
              <span class="current">₹${item.after}</span>
            </div>
            <a href="#${"product"+item._id}" data-bs-toggle="modal" class="btn btn-secondary">more</a>
          </div>
        </div>`;
    })
    main.innerHTML = cardData;
  })
  .catch((e)=>{
    console.log(e)
  })

如果你需要在DOM插入完成后再添加类，可在main.innerHTML = cardData;之后追加如下逻辑：

document.querySelectorAll('.rate').forEach((rateEl, idx) => {
  const rate = Math.min(Math.max(data[idx].rating, 0), 5);
  rateEl.querySelectorAll('a').forEach((a, i) => {
    if (i < rate) a.classList.add('active');
  })
})

内容的提问来源于stack exchange，提问作者Siddhesh Bhadale