Javascript 在页面上有第二个 div 时停止工作 class

Question

我有一些代码用于在 Squarespace 中自动播放摘要块。 这是通过每三秒自动单击下一个按钮来完成的解决方法。 如果查看者单击上一个按钮，该代码也会关闭。

这很好用，除非页面上有多个摘要块。 只要有多个，代码就不会运行。 我以为我通过循环遍历所有摘要块来绕过一个以上，但它似乎没有工作（也许我误解了循环？）。

  var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
  for (var i = 0; i < summaryCarousel.length; i++) {
    var carouselNextArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-next");
    var carouselPrevArrow = summaryCarousel[i].querySelector(".summary-carousel-pager-prev");
    carouselPrevArrow.addEventListener("click", carouselStopAutoplay, false);
  }

  function carouselClickNext() {
    carouselNextArrow.click();
  }

  function carouselStopAutoplay() {
    clearInterval(carouselAutoplay);
  }

  let carouselAutoplay = setInterval(carouselClickNext, 3000);

谁能看到我做错了什么？

更新

感谢下面的 charlietfl 帮助我。 代码现在可以正常工作，只是每次单击后都会打开 Squarespace 编辑器。 我想出了这个解决方法，让它只在网站的实时版本上应用代码。 但是，如果有人对代码为什么这样做有任何想法，将不胜感激！

if(window.location.href.indexOf("squarespace") < 0 ) {  
    var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
    for (var i = 0; i < summaryCarousel.length; i++) {
      initAutoClick(summaryCarousel[i]);
    }

    function initAutoClick(parent){

      var carouselNextArrow = parent.querySelector(".summary-carousel-pager-next");
      var carouselPrevArrow = parent.querySelector(".summary-carousel-pager-prev"); 

      carouselPrevArrow.addEventListener("click", carouselStopAutoplay, false);


      function carouselClickNext() {
        carouselNextArrow.click();
      }

      function carouselStopAutoplay() {
        clearInterval(carouselAutoplay);
      }

      let carouselAutoplay = setInterval(carouselClickNext, 3000);

    }
  }

Answer 1

基本问题是循环完成后carouselNextArrow的值将仅是最后一个汇总块中的值。 setInterval 也不是特定于实例的

您可以将其包装在 function 中以调用每个汇总块实例。

var summaryCarousel = document.querySelectorAll(".sqs-block-summary-v2");
for (var i = 0; i < summaryCarousel.length; i++) {
  // call function for each instance
  initAutoClick(summaryCarousel[i])
}

function initAutoClick(parent){

  var carouselNextArrow = parent.querySelector(".summary-carousel-pager-next");
  var carouselPrevArrow = parent.querySelector(".summary-carousel-pager-prev"); 

  carouselPrevArrow.addEventListener("click", carouselStopAutoplay, false);


  function carouselClickNext() {
    carouselNextArrow.click();
  }

  function carouselStopAutoplay() {
    clearInterval(carouselAutoplay);
  }

  let carouselAutoplay = setInterval(carouselClickNext, 3000);

}