如何在JSON的基础上在JS中添加类? [英] How to add a class in JS on the basis of JSON?

问题描述

File.php

我有一个html/php代码，如下所示.以下代码位于 File.php 文件中.

I have a html/php code as shown below. The following code is inside File.php file.

<div class="wrapper">
 <?php if (in_array("1", $data->toggle_multi_tiles)) {
  <img class="featured-block__item featured-block__item-active" src="https://via.placeholder.com/400x300?text=picture%201" alt="">
  <?php } <?php if (in_array("2", $data->toggle_multi_tiles)) { ?>
  <img class="featured-block__item" src="https://via.placeholder.com/400x300?text=picture%202" alt="">
  <?php } if (in_array("3", $data->toggle_multi_tiles)) { ?> 
  <img class="featured-block__item" src="https://via.placeholder.com/400x300?text=picture%203" alt="">
  <?php }  ?>
</div>

Admin.php

我有一个JSON(A行)，如下所示.以下php代码位于 Admin.php 文件中.

I have a JSON (Line A) as shown below. The following php code is inside Admin.php file.

{"toggle_multi_tiles":["1","2","3"]}  // Line A

file.php 和 admin.php 文件正在相互通信.

file.php and admin.php files are communicating with each other.

问题陈述:

我想知道我需要在下面的JS代码中进行哪些更改，以便它在JSON的基础上在DOM中添加featured-block__item-active类，如下所示:

I am wondering what changes I need to make in the JS code below so that it adds featured-block__item-active class in DOM on the basis of JSON something like this:

当其== {"toggle_multi_tiles":["1","2","3"]}时，DOM应该是这样的:

When its => {"toggle_multi_tiles":["1","2","3"]} then DOM should be like this:

<div class="wrapper">
  <img class="featured-block__item featured-block__item-active" src="https://via.placeholder.com/400x300?text=picture%201" alt="">  <!-- 1 -->
  <img class="featured-block__item" src="https://via.placeholder.com/400x300?text=picture%202" alt="">          <!-- 2 -->  
  <img class="featured-block__item" src="https://via.placeholder.com/400x300?text=picture%203" alt="">          <!-- 3 -->
</div>

当其== {"toggle_multi_tiles":["1","2"]}时，DOM应该是这样的:

When its => {"toggle_multi_tiles":["1","2"]} then DOM should be like this:

<div class="wrapper">
  <img class="featured-block__item featured-block__item-active" src="https://via.placeholder.com/400x300?text=picture%201" alt="">  <!-- 1 -->
  <img class="featured-block__item" src="https://via.placeholder.com/400x300?text=picture%202" alt="">          <!-- 2 -->  
</div>

当其== {"toggle_multi_tiles":["1","3"]}时，DOM应该是这样的:

When its => {"toggle_multi_tiles":["1","3"]} then DOM should be like this:

<div class="wrapper">
  <img class="featured-block__item featured-block__item-active" src="https://via.placeholder.com/400x300?text=picture%201" alt="">  <!-- 1 -->
  <img class="featured-block__item" src="https://via.placeholder.com/400x300?text=picture%203" alt="">          <!-- 3 -->
</div>

当其== {"toggle_multi_tiles":["2","3"]}时，DOM应该是这样的:

When its => {"toggle_multi_tiles":["2","3"]} then DOM should be like this:

<div class="wrapper">
  <img class="featured-block__item featured-block__item-active" src="https://via.placeholder.com/400x300?text=picture%202" alt="">  <!-- 2 -->  
  <img class="featured-block__item" src="https://via.placeholder.com/400x300?text=picture%203" alt="">          <!-- 3 -->
</div>

JavaScript:

const pics = document.querySelectorAll('.multi-tiles .featured-block__item');
const lastPic = pics.length - 1;
const transitionDuration = 800; // matches CSS
const transitionDelay = 3000; // up to you
const totalDelay = transitionDuration + transitionDelay;
const intervalDelay = (transitionDuration * 2) + transitionDelay; // time to fade out + time to fade in + time to stay featured-block__item-featured-block__item-active

function toggleClass() {
  const activePic = document.querySelector('.featured-block__item.featured-block__item-featured-block__item-active');
  const activeIndex = Array.prototype.indexOf.call(pics, activePic);
  const nextIndex = activeIndex === lastPic ? 0 : activeIndex + 1;
  const nextPic = pics[nextIndex];

  setTimeout(() => activePic.classList.remove('featured-block__item-featured-block__item-active'), transitionDelay);
  setTimeout(() => nextPic.classList.add('featured-block__item-featured-block__item-active'), totalDelay);
}

setInterval(toggleClass, intervalDelay);

推荐答案

喜欢吗?

const admin = {"toggle_multi_tiles":["1","3","2"]};
const toggle = admin.toggle_multi_tiles;
const wrapper = document.querySelector(".wrapper");
let html = [];

for (let i=0;i<toggle.length; i++) {
  html.push(`<img class="featured-block__item${i===0?" featured-block__item-active":""}" src="https://via.placeholder.com/400x300?text=picture%20${toggle[i]}" alt="">  <!-- ${toggle[i]} -->`)
}
wrapper.innerHTML=html.join("\n")

.featured-block__item-active { border:3px solid red }

<div class="wrapper">
</div>

这篇关于如何在JSON的基础上在JS中添加类?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！