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

您的问题是：this内的setTimeout是全局问题。尝试使用.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();

Answer 2

这个变量，在setTimeout函数里面，没有引用。做类似的事情

 setInterval(function() {
            $.each($('.eachsponsor'), function(){
                var that = this;
                $(this).find('img.cold').css("display","none");
                $(this).find('img.hot').css("display", "block");
                setTimeout(function(){
                    $(that).find('img.hot').css("display","none");
                    $(that).find('img.cold').css("display", "block");
                }, innertime);
            });
        }, outertime);

jQuery每个和时序循环

2 个答案: