我有一個回圈，它從 API 中回傳所有不同的專案。每個專案都具有相同的類 div 以實作更清潔的 css。我想讓每個 div 將其背景顏色更改為相應的稀有度。目前這段代碼使每個 div 變綠。它使用一個 IF 陳述句，如果我添加更多 else ifs，它會為每個 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)");
}
});
uj5u.com熱心網友回復：
在我看來，整個串列的樣式僅基于第一個元素的 displayValue 屬性。您的代碼僅參考 item.items[0]，這是第一項。我的想法是您將需要遍歷專案串列并確定每張卡片的 displayValue。
在這一點上，您撰寫的代碼似乎也使用 jQuery 來查找屬于 .card 類的所有專案，并將它們全部更新為相同的背景。你需要找到你想要的確切卡和更新背景只是一個替代。
uj5u.com熱心網友回復：
假設你在你的每個回圈中
item.items[0].rarity.displayValue
陣列第一個元素稀有度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 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>轉載請註明出處，本文鏈接：https://www.uj5u.com/houduan/364882.html
標籤：javascript 查询 css 数组
上一篇：將陣列拆分為多個陣列