根据响应值更改许多相同类 DIV 的颜色

Question

我有一个循环，它从 API 返回所有不同的项目。每个项目都有相同的类 div 用于更清洁的 css。我想让每个 div 将其背景颜色更改为相应的稀有度。目前这段代码使每个 div 都是绿色的。它使用一个 IF 语句，如果我添加更多 else if，它会为每个 div 选择绿色。

            $.each(data.data.daily.entries, function(i, item) {
            //Creating item cards
            $('body > #cards_daily').append('<div class="card"> ' + item.items[0].name + ' <br> ' + item.finalPrice + '<img src="https://fortnite-api.com/images/vbuck.png" height="20px">' + ' <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>');
            //Debug rarity
            console.log(item.items[0].rarity.displayValue)
            //Trying different values, to match right one
            if (item.items[0].rarity.displayValue === "rare") {
                $(".card").css("background-color", "red"); //Gray

            } else if (item.items[0].rarity.displayValue === "Uncommon") {
                $(".card").css("background-color", "#319236"); //Green

            } else if (item.items[0].rarity.displayValue === "Rare") {
                $(".card").css("background-color", "#4c51f7"); //Blue

            } else if (item.items[0].rarity.displayValue === "Epic") {
                $(".card").css("background-color", "#9d4dbb"); //Purple

            } else if (item.items[0].rarity.displayValue === "Legendary") {
                $(".card").css("background-color", "#f3af19"); //Gold

            } else if (item.items[0].rarity.displayValue === "Icon Series") {
                $(".card").css("background-color", "#00FFFF"); //Cyan

            } else {
                $(".card").css("background-color", "rgb(148, 148, 150)");
            }
        });

Answer 1

假设你在每个循环中

item.items[0].rarity.displayValue

array first element rarity displayValue对于所有其他元素都是通用的，因此您可以像这样使用下面的代码。

注意请记住，每当您使用 $(".card") 选择项目时，它都会从 DOM 中选择所有卡片元素。所以最好在创建 CSS 时对其进行隔离。

//Daily offers
fetch('https://fortnite-api.com/v2/shop/br')
    .then(res => res.json())
    .then(data => {
        $.each(data.data.daily.entries, function(i, item) {
            if (data.data.daily.entries[i].bundle != null) {
                return;
            }
            var html='';
            if(item.items[0].rarity.displayValue){
              var bgcolorforDiv=fetchbackGround(item.items[0].rarity.displayValue);
              html='<div class="card" style="background-color:'+bgcolorforDiv+'"> <b>' + item.items[0].name + '</b> <br> <span>' + item.finalPrice + '<img id="v_buck" src="https://fortnite-api.com/images/vbuck.png" height="28px"> </span>' + ' <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>';

            }
            else{
              html='<div class="card"> <b>' + item.items[0].name + '</b> <br> <span>' + item.finalPrice + '<img id="v_buck" src="https://fortnite-api.com/images/vbuck.png" height="28px"> </span>' + ' <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>';
            }
            $('body > #cards_daily').append(html);
        });
    });
function fetchbackGround(rarity){
  var background="rgb(148, 148, 150)";
  switch(rarity){
     case "rare":background="red";break;
     case "Uncommon":background="#319236";break;
     case "Rare":background="#4c51f7";break;
     case "Epic":background="#9d4dbb";break;
     case "Legendary":background="#f3af19";break;
     case "Icon Series":background="#00FFFF";break;
  }
  return background;
}
//Featured offers
fetch('https://fortnite-api.com/v2/shop/br')
    .then(res => res.json())
    .then(data => {
        $.each(data.data.featured.entries, function(i, item) {
            if (data.data.featured.entries[i].bundle != null) {
                return;
            }
            $('body > #cards_featured').append('<div class="card"> ' + item.items[0].name + ' <br> <span>' + item.finalPrice + '<img id="v_buck" src="https://fortnite-api.com/images/vbuck.png" height="28px"> </span>' + '  <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>');
        });
    });

fetch('https://fortnite-api.com/v2/shop/br')
    .then(res => res.json())
    .then(data => {
        $.each(data.data.specialFeatured.entries, function(i, item) {
            if (data.data.specialFeatured.entries[i].bundle != null) {
                return;
            }
            $('body > #cards_featured_special').append('<div class="card"> ' + item.items[0].name + ' <br> <span>' + item.finalPrice + '<img id="v_buck" src="https://fortnite-api.com/images/vbuck.png" height="28px"> </span>' + '  <br> ' + '<img id="image" src="' + item.items[0].images.icon + '"></img>' + '</div>');
        });
    });

//Timer
(function() {
    var start = new Date;
    start.setHours(2, 0, 0); // 02.00

    function pad(num) {
        return ("0" + parseInt(num)).substr(-2);
    }

    function tick() {
        var now = new Date;
        if (now > start) { // too late, go to tomorrow
            start.setDate(start.getDate() + 1);
        }
        var remain = ((start - now) / 1000);
        var hh = pad((remain / 60 / 60) % 60);
        var mm = pad((remain / 60) % 60);
        var ss = pad(remain % 60);
        document.getElementById('time').innerHTML =
            hh + ":" + mm + ":" + ss;
        setTimeout(tick, 1000);
    }
    document.addEventListener('DOMContentLoaded', tick);
}());

@import url('https://fonts.googleapis.com/css2?family=Indie+Flower&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Road+Rage&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Poppins&display=swap');
* {
    padding: 0;
    margin: 0;
    box-sizing: border-box;
}

body {
    background-color: rgb(42, 42, 184);
    display: flex;
    align-items: center;
    flex-direction: column;
}

header {
    font-family: 'Road Rage', Arial;
    font-size: 30px;
    height: 100px;
    text-align: center;
}

#cards_daily {
    margin-top: 160px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(105, 105, 105);
    padding: 30px 5px;
    width: 100%;
    max-width: 1740px;
    border-radius: 15px;
    position: relative;
    flex-wrap: wrap;
}

#cards_featured {
    margin-top: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(105, 105, 105);
    padding: 30px 5px;
    width: 100%;
    max-width: 1740px;
    border-radius: 15px;
    position: relative;
    flex-wrap: wrap;
}

#cards_featured_special {
    margin-top: 100px;
    display: flex;
    justify-content: space-evenly;
    align-items: center;
    background-color: rgb(105, 105, 105);
    padding: 30px 5px;
    width: 100%;
    max-width: 1740px;
    border-radius: 15px;
    position: relative;
    flex-wrap: wrap;
}

#OTSIKKO {
    font-family: 'Road Rage', Arial;
    position: absolute;
    font-size: 3rem;
    top: -40px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: yellow;
    background-color: rgb(105, 105, 105);
    width: max-content;
    padding: 0px 10px 10px;
    border-radius: 10px;
}

.timer {
    font-family: 'Monospace', Arial;
    position: absolute;
    font-size: 15px;
    top: 10px;
    left: 0;
    right: 0;
    margin: 0 auto;
    color: yellow;
    /*background-color: rgb(105, 105, 105);*/
    width: 290px;
    padding: 5px 5px 10px;
    border-radius: 10px 10px 0px 0px;
    text-align: center;
    display: block;
    font-weight: 700;
}

.card {
    display: flex;
    background-color: rgb(148, 148, 150);
    width: 160px;
    height: 240px;
    border-radius: 15px;
    padding: 0px 10px;
    flex-direction: column;
    justify-content: space-between;
    align-items: center;
    color: white;
    font-family: 'Poppins', Arial;
    font-size: 1rem;
    margin: 15px 10px;
    -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
    -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
    box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
    text-align: center;
    overflow: hidden;
}

.card span {
    display: flex;
    height: 30px;
    align-items: center;
}

#v_buck {
    margin-left: 5px;
}

#image {
    /*DEBUG BORDER
border: 4px solid red; */
    max-height: 125px;
}

#introduce,
#introduce1 {
    font-size: 10px;
    color: rgb(82, 82, 87);
}

footer {
    padding: 10px;
    font-family: 'Indie Flower', Helvetica, sans-serif;
    text-align: center;
    text-decoration: none;
    color: white;
}

footer a {
    text-decoration: none;
    color: white;
}


/*DESKTOP*/

@media only screen and (min-width: 768px) {
    * {
        padding: 0;
        margin: 0;
        box-sizing: border-box;
    }
    body {
        background-color: rgb(82, 82, 87);
        display: flex;
        align-items: center;
        flex-direction: column;
    }
    header {
        font-family: 'Road Rage', Arial;
        font-size: 45px;
        height: 100px;
        text-align: center;
    }
    #cards_daily {
        margin-top: 150px;
        display: flex;
        justify-content: space-evenly;
        align-items: center;
        background-color: rgb(105, 105, 105);
        padding: 30px;
        width: 90%;
        max-width: 1740px;
        border-radius: 15px;
        position: relative;
        flex-wrap: wrap;
    }
    #cards_featured {
        margin-top: 100px;
        margin-bottom: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background-color: rgb(105, 105, 105);
        padding: 30px 10px;
        width: 90%;
        max-width: 1740px;
        max-height: max-content;
        border-radius: 15px;
        position: relative;
    }
    #cards_featured_special {
        margin-top: 100px;
        margin-bottom: 100px;
        display: flex;
        justify-content: center;
        align-items: center;
        flex-wrap: wrap;
        background-color: rgb(105, 105, 105);
        padding: 30px 10px;
        width: 90%;
        max-width: 1740px;
        max-height: max-content;
        border-radius: 15px;
        position: relative;
    }
    #OTSIKKO {
        font-family: 'Road Rage', Arial;
        position: absolute;
        font-size: 45px;
        top: -65px;
        left: 0px;
        color: yellow;
        background-color: rgb(105, 105, 105);
        width: max-content;
        padding: 0px 10px 10px;
        border-radius: 10px;
    }
    .timer {
        font-family: 'Monospace', Arial;
        position: absolute;
        font-size: 15px;
        top: -20px;
        right: 0px;
        color: yellow;
        background-color: rgb(105, 105, 105);
        width: 290px;
        padding: 5px 5px 10px;
        border-radius: 10px 10px 0px 0px;
        text-align: center;
        display: block;
        font-weight: 700;
    }
    .card {
        display: flex;
        background-color: rgb(148, 148, 150);
        width: 230px;
        height: 340px;
        border-radius: 15px;
        padding: 0px 10px;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        color: white;
        font-family: 'Poppins', Arial;
        font-size: 22px;
        margin: 15px 10px;
        -webkit-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
        -moz-box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
        box-shadow: 0px 0px 15px 0px rgba(0, 0, 0, 0.75);
        text-align: center;
        overflow: hidden;
    }
    .card span {
        display: flex;
        height: 30px;
        align-items: center;
    }
    #v_buck {
        margin-left: 5px;
    }
    #image {
        /*DEBUG BORDER
    border: 4px solid red; */
        max-height: 250px;
    }
    #introduce,
    #introduce1 {
        font-size: 10px;
        color: rgb(82, 82, 87);
    }
    footer {
        padding: 10px;
        font-family: 'Indie Flower', Helvetica, sans-serif;
        text-align: center;
        text-decoration: none;
        color: white;
    }
    footer a {
        text-decoration: none;
        color: white;
    }
}

<!DOCTYPE html>
<html>

<head>

    <title>Fortnite itemshop tracker!</title>
<style type="text/css">

</style>
    <link rel="stylesheet" href="style.css?v=1.0">
    <link rel="apple-touch-icon" sizes="180x180" href="favicon/apple-touch-icon.png">
    <link rel="icon" type="image/png" sizes="32x32" href="favicon/favicon-32x32.png">
    <link rel="icon" type="image/png" sizes="16x16" href="favicon/favicon-16x16.png">
    <link rel="manifest" href="img/site.webmanifest">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>

</head>

<body>


    <header>
        <h1>Pinja's daily itemshop tracker</h1>
        <h3>[Work in progress]</h3>
    </header>
    <div id="cards_daily">

        <H1 id="OTSIKKO">Daily offers</H1>
        <div class="timer">
            Daily shop reset in: <span id="time"></span>
        </div>


    </div>
    <div id="cards_featured_special">
        <H1 id="OTSIKKO">Featured specials</H1>
        <div class="timer">
            Bundles are not included!
        </div>

    </div>
    <div id="cards_featured">
        <H1 id="OTSIKKO">Featured</H1>
        <div class="timer">
            Bundles are not included!
        </div>

    </div>
</body>

</html>

Answer 2

在我看来，整个列表的样式仅基于 first 元素的 displayValue 属性。您的代码仅引用 item.items[0]，这是第一项。我的想法是，您将需要遍历项目列表并确定每张卡片的 displayValue。

在该注释中，您编写的代码似乎也使用 jQuery 来查找所有属于 .card 类的项目，并将它们全部更新为相同的背景。您需要找到您想要的确切卡片并更新只是那个的背景。