使用循环调用具有单独上下文的函数

Question

我有一个脚本，其中为页面上的每个元素调用一个函数。它可以很好地处理单独的函数调用，但如果我试图用唯一的选择器调用函数，它就不能正常工作。我如何实现一个循环，为每个html块单独调用函数，但只使用一个类（例如，如果我有X元素），而不使用像现在这样的单独的选择器(startLoop('#stack1')；startLoop('#stack2')；ecc.ecc.)对它们进行寻址（startLoop('#stack1')；startLoop('#stack2')；ecc.ecc.)

let timer;

function startLoop(container) {
let lastCard = $(container + ' .card').length - 1;
  timer = setInterval(function () {
    let prependList = function() {
      if( $(container + ' .card').hasClass('activeNow') ) { 
        let $slicedCard = $(container + ' .card').slice(lastCard).removeClass('transformThis activeNow');
        $(container + ' ul.card-list').prepend($slicedCard);
      }
    }
    
    $(container + ' li.card').last().addClass('transformThis').prev().addClass('activeNow');
    setTimeout(function(){prependList(); }, 250);
  }, 4500);
}

 if ($('#stack1')[0]) {
  startLoop('#stack1');
}

if ($('#stack2')[0]) {
  startLoop('#stack2');
} 

Answer 1

您是否尝试使用.each（）？

假设您希望循环遍历具有类.stacks的所有元素

因此，如果您想要遍历类.stacks的所有元素，那么您可以如下所示：

$(function(){
    $(".stacks").each(function(index, element){
        var elementId = $(element).attr("id");
        startLoop("#" + elementId);
    });
});

// from here your codes start
let timer;

function startLoop(container) {

    let lastCard = $(container).find('.card').length - 1;
      timer = setInterval(function () {
        let prependList = function() {
          if( $(container + ' .card').hasClass('activeNow') ) { 
            let $slicedCard = $(container + ' .card').slice(lastCard).removeClass('transformThis activeNow');
            $(container + ' ul.card-list').prepend($slicedCard);
          }
        }
        
        $(container + ' li.card').last().addClass('transformThis').prev().addClass('activeNow');
        setTimeout(function(){prependList(); }, 250);
      }, 4500);

}