javascript - jQueryeach 和定时循环

Question

我正在尝试构建一系列嵌套的计时循环。内部循环迭代具有相同 CSS 类的 6 个项目，并交换图像 4 秒。外循环导致内循环不断重复。因此，image1 交换、image2 交换... image6 交换、image1 交换、image2 交换...每个 div 中有两个图像，一个具有“热”类，一个具有“冷”类。一开始，“热门”图像被隐藏。

以下代码在 24 秒后立即交换所有图像，然后似乎没有执行任何其他操作。

        var innertime = 4000; //highlight effect time in ms
        var outertime = innertime * 6;
        setInterval(function() {
            $.each($('.eachsponsor'), function(){
                $(this).find('img.cold').css("display","none");
                $(this).find('img.hot').css("display", "block");
                setTimeout(function(){
                    $(this).find('img.hot').css("display","none");
                    $(this).find('img.cold').css("display", "block");
                }, innertime);
            });
        }, outertime);

如果有人对为什么这不起作用有任何指示，我将不胜感激。

Answer 1

你的问题是:setTimeout内的this是全局的。尝试使用 .bind 绑定(bind)上下文

setTimeout(function(){
           $(this).find('img.hot').css("display","none");
           $(this).find('img.cold').css("display", "block");
      }.bind(this),innertime);

但是我认为你的代码仍然没有达到你想要的效果，我认为你需要这个:

var innertime = 4000;
var eachsponsor = $('.eachsponsor');
$.each(eachsponsor, function(){
       $(this).find('img.cold').hide();
       $(this).find('img.hot').show();
});

var currentIndex = 0;
setInterval(function(){
      var currentDiv = eachsponsor.eq(currentIndex);
      currentDiv.find('img.hot').toggle();
      currentDiv.find('img.cold').toggle();

      currentIndex = (currentIndex+1) % eachsponsor.length;
 }, innertime);

更新:

var innertime = 4000;
    var eachsponsor = $('.eachsponsor');
    $.each(eachsponsor, function(){
           $(this).find('img.cold').hide();
           $(this).find('img.hot').show();
    });

    var currentIndex = 0;

    function slideNext(){
          var currentDiv = eachsponsor.eq(currentIndex);

          currentDiv.find('img.cold').hide();
          currentDiv.find('img.hot').show();

          setTimeout(function(){
              currentDiv.find('img.hot').toggle();
              currentDiv.find('img.cold').toggle();
              currentIndex = (currentIndex+1) % eachsponsor.length;
              slideNext();
          },innertime);
    }

    slideNext();