如何为Slick-Slider各卡片按用户指定数量添加对应次数的评分图片？

问题根源 #

你的代码仅对第一个.ratingStar容器添加星标（theLeftSide[0]），且所有卡片使用相同的评分数量，导致其余卡片无星标显示。

修正方案 #

我们需要为每张卡片指定不同的评分数量，并遍历所有.ratingStar容器逐一添加对应数量的星标：

// 定义每张卡片对应的评分数量（可根据用户输入动态修改）
const ratings = [5, 4, 3, 5];
const ratingContainers = document.querySelectorAll(".ratingStar");

function addRatingStars() {
  // 遍历每个评分容器
  ratingContainers.forEach((container, index) => {
    // 获取当前卡片对应的评分数量
    const starCount = ratings[index];
    // 清空容器原有内容（可选，避免重复添加）
    container.innerHTML = "";
    // 添加对应数量的星标图片
    for (let i = 0; i < starCount; i++) {
      const starImg = document.createElement("img");
      starImg.src = "assets/images/rating.png";
      container.appendChild(starImg);
    }
  });
}

// 调用函数生成星标
addRatingStars();

关键修改点 #

• 使用数组ratings存储每张卡片的评分数量，实现不同卡片的差异化显示
• 通过forEach遍历所有.ratingStar容器，为每个容器单独处理星标添加
• 修复循环变量未声明的问题（添加let），避免全局变量污染
• 可选：添加container.innerHTML = ""防止重复调用函数时星标叠加

内容的提问来源于stack exchange，提问作者P Jaju