setInterval 在没有 jquery 的 javascript 中一个一个地改变一组元素的样式

Question

我有一段代码，我从 JSON 中取出数据并将它们分成四个部分。

有了这四个部分，我想为一个部分添加边框 2 秒，然后移除边框并将其添加到另一个部分。等等。一旦边界在最后一部分，整个过程应该重新开始。

根据我在类似线程中阅读的内容，我应该通过循环对每个元素使用 setInterval 和 add/remove class，但不确定如何编写。有人可以帮忙吗？

function completeAd(obj) {
  const offers = obj['offers'];

  for (let i = 0; i < 4; i++) {
    let rand = Math.floor((Math.random() * offers.length));

    const singleAd = document.createElement('section');
    singleAd.className = "adSection"
    const price = document.createElement('p');
    const imgURL = document.createElement('img')

    imgURL.src = "http:" + offers[rand].imgURL
    price.textContent = offers[rand].price + " " + offers[rand].currency;

    singleAd.appendChild(price);
    singleAd.appendChild(imgURL);

    adSection.appendChild(singleAd);

  }
}

Answer 1

是的，您需要在一个间隔

中添加和删除一个class

https://jsfiddle.net/mplungjan/pt68Lqoe/

const obj = {
offers : [ 
  { price:200, currency:"$", imgURL: "https://picsum.photos/200/200" },
  { price:300, currency:"$", imgURL: "https://picsum.photos/300/200" },
  { price:400, currency:"$", imgURL: "https://picsum.photos/400/200" },
  { price:500, currency:"$", imgURL: "https://picsum.photos/500/200" },
  { price:600, currency:"$", imgURL: "https://picsum.photos/600/200" }
]}


const fy = (a, b, c, d) => { c = a.length; while (c) b = Math.random() * (--c + 1) | 0, d = a[c], a[c] = a[b], a[b] = d}; // shuffle

fy(obj.offers); // shuffle them

window.addEventListener("load", () => {
  document.getElementById("adSections").innerHTML = obj.offers.slice(0, 4) // take the first 4
    .map(offer => `<section class="adSection"><p>${offer.price}${offer.currency}</p><img src="${offer.imgURL}" />`).join('');

  const sections = document.querySelectorAll(".adSection");
  let cnt = sections.length - 1;
  setInterval(function() {
    sections[cnt].classList.remove("active");
    cnt++;
    if (cnt >= sections.length) cnt = 0;
    sections[cnt].classList.add("active")
  }, 3000)

})

section {
  display: block;
  border: 1px solid white;
  width: 500px
}

.active {
  border: 1px solid black
}

img {
  height: 200px
}

<div id="adSections">


</div>

setInterval 在没有 jquery 的 javascript 中一个一个地改变一组元素的样式

setInterval to change style of set of elements one by one in javascript without jquery

javascript

setinterval