如何使用javascript改变基于API值的css ?

Question

如果API值字段x_restrict等于1，我如何将其设置为仅插入span类card__title，并在card__image中更改filter: blur(0px)的css值为filter: blur(10px)

到目前为止，我的脚本所做的是从api中抓取图像，只显示6张图像。

const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=12540747&page=1';
var p = [];
var y;
var i = 0;
fetchData(url);
function fetchData(url) {
fetch(url).then((response) => response.json()).then(function(data) {
//console.log('data', data);
data.illusts.slice(0, 6).forEach((art) => {
var imgSrc = art.image_urls.medium.replace('i.pximg.net', 'i.pixiv.cat');
p[i] = `<div class="card">
<div class="card__image"><a href="https://www.pixiv.net/en/artworks/${art.id}" target="_blank" rel="noopener noreferrer"><img src="${imgSrc}" alt="image" ></a></div>
<span class="card__title">NSFW</span>
</div>`;
i++;

var x = document.getElementsByClassName('card__wrapper');
var y = p.join(' ');
x[0].innerHTML = y;
});
});
}

/*I have used simple CSS to make the cards responsive */
*,
*:after,
*:before {
box-sizing: border-box;
}

body {
background-color: #fff;
color: #333;
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.card__wrapper {
display: flex;
margin: 0 auto;
padding: 0%;
max-width: 1024px;
background-color: #ccc;
flex-wrap: wrap;
flex-direction: row;
}
.card img {
max-width: 200px;
}
.card__image {
filter: blur(0px)
}
.card {
background-color: #fff;
border-radius: 6px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
margin: 10px 10px;
padding: 20px;
text-align: center;
}

.card__title {
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
position: absolute;
top: 10px;
left: 20px;
background-color: red;
color: #FFF;
padding: 5px;
}

.card__cta {
padding: 10px 25px;
margin: 10px 0px;
background-color: #e26d00;
font-size: 20px;
color: #fff;
width: 100%;
}

.card__cta:hover {
background-color: #ffb066;
}

@media screen and (max-width: 449px) {
.card {
width: 95%;
}
}

@media screen and (min-width: 450px) and (max-width: 699px) {
.card {
width: 45.5%;
}
}

@media screen and (min-width: 700px) and (max-width: 1023px) {
.card {
width: 30.5%;
}
}

@media screen and (min-width: 1024px) {
.card {
width: 23%;
}
}

<section>
<main class="card__wrapper">
</main>
</section>

Answer 1

您所需要做的就是分配一个变量，该变量根据art.x_restrict是否返回真值或假值为您的卡设置一个类。我将nsfw变量赋值为""或"blur"，这取决于该条件。然后将卡的类设置为包含${nsfw}。在css中，只需在blur类下包含一个样式规则，以获得filter: blur(5px)。

你不能像你要求的那样，把一个样式规则改变为一个类的每个实例都是唯一的。此外，您不能仅仅通过DOM操作来改变元素的样式，因为您声明的是一个模板字面量，而不是构建一个html对象。有条件地分配具有模糊的类是您的方法的最佳方法。

要有条件地添加NSFWspan，只需添加另一个条件语句，如果nsfw为真，则返回span的字符串。我使用&&逻辑运算符

实现了这一点另外，我清理了一些你的功能不需要的项目。而不是forEach，我用一个映射函数代替了它，它返回一个数组。这样我就可以将p设置为所有美术作品html的返回数组。这样就不需要增加i或根据索引压入数组。我觉得这样比较干净。

const url = 'https://api.adoreanime.com/api/pixiv/?type=member_illust&id=12540747&page=1';
fetchData(url);
function fetchData(url) {
fetch(url).then((response) => response.json()).then(function(data) {
var p = data.illusts.slice(0, 6).map(art => {
var imgSrc = art.image_urls.medium.replace('i.pximg.net', 'i.pixiv.cat');
var nsfw = art.x_restrict ? "blur" : ""
return `<div class="card">
<div class="card__image ${nsfw}"><a href="https://www.pixiv.net/en/artworks/${art.id}" target="_blank" rel="noopener noreferrer"><img src=${imgSrc} alt="image"/></a></div>
${nsfw && '<span class="card__title">NSFW</span>'}
</div>`
})
var x = document.getElementsByClassName('card__wrapper');
var y = p.join(' ');
x[0].innerHTML = y;
})
}

/*I have used simple CSS to make the cards responsive */
*,
*:after,
*:before {
box-sizing: border-box;
}

body {
background-color: #fff;
color: #333;
font-family: Tahoma, sans-serif;
margin: 0;
padding: 0;
}

a {
text-decoration: none;
}

a:hover {
text-decoration: underline;
}

.card__wrapper {
display: flex;
margin: 0 auto;
padding: 0%;
max-width: 1024px;
background-color: #ccc;
flex-wrap: wrap;
}
.card img {
max-width: 200px;
width: 100%;
}
.card__image {
filter: blur(0x)
}
.blur {
filter: blur(5px);
}
.card {
background-color: #fff;
border-radius: 6px;
filter: drop-shadow(0 0 20px rgba(0, 0, 0, 0.2));
margin: 10px 10px;
padding: 20px;
text-align: center;
}

.card__title {
margin-top: 10px;
font-family: Arial, Helvetica, sans-serif;
font-size: 28px;
position: absolute;
top: 10px;
left: 20px;
background-color: red;
color: #FFF;
padding: 5px;
}

.card__cta {
padding: 10px 25px;
margin: 10px 0px;
background-color: #e26d00;
font-size: 20px;
color: #fff;
width: 100%;
}

.card__cta:hover {
background-color: #ffb066;
}

@media screen and (max-width: 449px) {
.card {
width: 95%;
}
}

@media screen and (min-width: 450px) and (max-width: 699px) {
.card {
width: 45.5%;
}
}

@media screen and (min-width: 700px) and (max-width: 1023px) {
.card {
width: 30.5%;
}
}

@media screen and (min-width: 1024px) {
.card {
width: 23%;
}
}

<section>
<main class="card__wrapper">
</main>
</section>