Home > database >  Changing many same class DIV's color based on response value
Changing many same class DIV's color based on response value

Time：11-24

I have a loop which returns me all different items from the API. Each item has same class div for cleaner css. I want to make every div change it's background color to corresponding rarity. At the moment this code makes every div green. It's working with one IF statement, if I add more else ifs it picks green color for every div.

            $.each(data.data.daily.entries, function(i, item) {
            //Creating item cards
            $('body > #cards_daily').append('<div > '   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)");
            }
        });

CodePudding user response：

It looks to me like the entire list's style is based on the displayValue attribute of only the first element. Your code only references item.items[0], which is the first item. My thought is that you're going to need to iterate through the list of items and determine the displayValue for each of the cards.

On that note, it looks like the code you've written also uses jQuery to find all items that are of the .card class, and updates them all to be the same background. You'll need to find the exact card that you want and update the background for just that one instead.

CodePudding user response：

Assuming your in your for each loop

item.items[0].rarity.displayValue

array first element rarity displayValue is common for all other elements so you can use the below code like this.

Note Remember whenever you are selecting the item using $(".card") it will select all the card elements from DOM. so better to segregate the CSS while creating it.

//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  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 > <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 > '   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 > '   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>
<iframe name="sif1" sandbox="allow-forms allow-modals allow-scripts" frameborder="0"></iframe>

Page link：https//www.codepudding.com/database/203272.html

Prev:How to scroll items simultaneously when they are within a table?
Next:jQuery get dynamic id of html element
  • Related

About Us:  Contact Us      Terms of Service       Privacy Policy

Copyright © 2010-2023，Powered By CodePudding