如何在相似元素上多次運行循環 function - js

Question

我有這個 function 循環通過 div（卡片），每 3 秒穿下一個。 一種幻燈片放映，畫廊。

我希望在多個“畫廊”（構建完全相同）上運行此 function。 我怎樣才能做到這一點？

這是現在收集頁面中所有“卡片”的 js，我希望它獲取每個畫廊的卡片並在畫廊本身上運行它：

var slideIndex = 0;
showSlides();

function showSlides() {
  var i;
  var slides = document.getElementsByClassName("card");

  for (i = 0; i < slides.length; i++) {
    slides[i].style.opacity = "0";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}
  slides[slideIndex-1].style.opacity = "1";
  setTimeout(showSlides, 3000);
}

我希望我能被理解 - 非常感謝！

Answer 1

你幾乎實現了它:)

function slideIt(elementId) {
  var slideIndex = 0;
  // showSlides();

  function showSlides() {
    var i;
    // var slides = document.getElementsByClassName("card");
    var slides = document.getElementsById(elementId);
    // ....
  }
  showSlides();
}
slideIt("card1")
slideIt("card2")

Answer 2

我最終使用了它並且效果很好：

const elements = document.querySelectorAll('.today-show');
var timer = document.getElementById('timer').innerHTML;


function intervalFunction(slideIndex) {

    var i;
    const currentElement = this;

    var slides = currentElement.querySelectorAll(".home-show-title");

    for (i = 0; i < slides.length; i++) {
    slides[i].classList.remove('home-title-appear');
    }
    setTimeout(function(){
        slides[slideIndex].classList.add('home-title-appear');
    },800)
}

elements.forEach(element => {
    const boundIntervalFunction = intervalFunction.bind(element);
    let slideIndex = 1;
    setInterval(() => {
        boundIntervalFunction(slideIndex);
        slideIndex++;
        if (slideIndex > 2) {slideIndex = 0 }
    }, timer+"000"); 
});

謝謝您的幫助！