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

Question

I have some code I am using to autoplay a Summary Block in Squarespace. It is a workaround done by automatically clicking the next button every three seconds. The code also has a shut off in case a viewer clicks the previous button.

This is working great except if there is more than one Summary Block on the page. As soon as there is more than one, the code doesn't run. I thought I was getting around more than one by having it loop through all of the Summary Blocks but it doesn't seem to be working (maybe I am misunderstanding the loop?).

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

Can anyone see what I am doing wrong?

UPDATE

Thank you to charlietfl below for helping me out. The code is now working except it is making the Squarespace Editor open after every click. I came up with this work around to have it only apply the code on the live version of the site. However, if anyone has any ideas as to why the code is doing this, it would be greatly appreciated!!

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

The basic problem is after the loop completes the value of carouselNextArrow will be the one in the last summary block only. Also the setInterval would not be instance specific either

You could wrap this in a function to call for each summary block instance.

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

}