How to change css based on API value using javascript? [NSFW]-CodePudding

Please note this is a NSFW question. How do I set it to only insert the span class card__title if API value field x_restrict is equal to 1 and change the css value of filter: blur(0px) to filter: blur(10px) in card__image

What my script does so far is grab images from the api and show only 6 images.

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 >
        <div ><a href="https://www.pixiv.net/en/artworks/${art.id}" target="_blank" rel="noopener noreferrer"><img src="${imgSrc}" alt="image" ></a></div>
        <span >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>

CodePudding user response：

All you need to do is assign a variable that sets a class for your card based on whether or not art.x_restrict returns a truthy or falsy value. I assigned a nsfw variable to be "" or "blur" depending on that condition. Then set the class of the card to include ${nsfw}. In the css just include a style rule under the blur class to have a filter: blur(5px).

You won't be able to change a style rule to be unique to every instance of a class like you're asking. Also, you can't just change the style of the element through DOM manipulation because you're declaring a template literal instead of building an html object. Conditionally assigning the class that has the blur is the best method for your approach.

To add the NSFW span conditionally, just add another conditional statement that returns the string that is the span if nsfw is truthy. I achieved this with the && logic operator

In addition, I cleaned out a few items that were not needed for your function. Instead of forEach I replaced it with a map function, which returns an array. That way I can set p to be the returned array of all of the art work html. This eliminates the need to increment i or push to an array based on index. I think it's a little cleaner.

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 >
          <div hljs-subst">${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 >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>