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);

}