根据API返回值修改多个同类class DIV背景色，代码运行全绿如何解决？

• 选择器范围错误：每次调用$(".card")都会选中页面中所有带card类的元素，循环到第n个卡片时，会把前面n-1个已经设置好背景的卡片全部覆盖为当前卡片匹配的颜色，最终所有卡片都会显示为最后一次循环匹配到的颜色。
• 冗余判断逻辑：代码中同时存在=== "rare"（小写）和=== "Rare"（大写）的判断，小写分支永远无法匹配到API返回的首字母大写的稀有度值，属于无效逻辑。
• 重复ID问题：所有卡片内的图片都使用了相同的id="image"属性，ID是全局唯一标识，重复ID会导致后续DOM操作出现异常。

$.each(data.data.daily.entries, function(i, item) {
    // 预先定义稀有度和对应背景色的映射关系，后续新增稀有度只需在此处配置
    const rarityColorMap = {
        "Uncommon": "#319236", // 绿色
        "Rare": "#4c51f7", // 蓝色
        "Epic": "#9d4dbb", // 紫色
        "Legendary": "#f3af19", // 金色
        "Icon Series": "#00FFFF" // 青色
    }
    // 将新创建的卡片存为变量，仅针对当前卡片操作，不影响其他卡片
    const $newCard = $('<div class="card"> ' + item.items[0].name + ' <br> ' + item.finalPrice + '<img src="https://fortnite-api.com/images/vbuck.png" height="20px">' + ' <br> ' + '<img src="' + item.items[0].images.icon + '"></img>' + '</div>');
    // 把卡片追加到容器
    $('body > #cards_daily').append($newCard);
    // 调试输出稀有度
    console.log(item.items[0].rarity.displayValue)
    // 匹配对应色值设置背景，匹配不到时默认用灰色
    const currentRarity = item.items[0].rarity.displayValue;
    $newCard.css("background-color", rarityColorMap[currentRarity] || "rgb(148, 148, 150)");
});

• 新增变量存储刚创建的卡片节点，仅对当前节点设置样式，不会覆盖其他卡片的背景色
• 改用对象映射的方式匹配稀有度和色值，代码更简洁易维护，避免多分支if else容易出现的判断遗漏问题
• 移除了无效的小写rare判断分支，删除了重复的ID属性避免DOM冲突

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