设置间隔前进到下一个 div 当计时器循环时

Question

我一直在摆弄这个：

http://jsfiddle.net/bXJhe/46/

我需要的是计时器循环后的时间前进到下一个div id。 我单击"一"，它显示当前 id，然后它应该前进到"二"、"三"......并显示各自的 ID。我不想使用 jQuery 的 .remove（） 或 .detach（）。 任何见解都会很棒。

有一个大项目到期，没有头发可以拔掉。

.HTML：

<span id="bar"></span>
<span id="timer">00:05</span>

<div id="one"><a href="#">one</a></div>
<div id="two"><a href="#">two</a></div>
<div id="three"><a href="#">three</a></div>
<div id="four"><a href="#">four</a></div>

.JS：

jQuery(document).ready(function() {
    jQuery('div').not(':first').hide();
    jQuery('a').hide();
    timer(5)
});
// Timer
var GLOBAL_TIMER;
function timer(intCount) {
    GLOBAL_TIMER = setInterval(function() {
        var intTickLength = 5;

        jQuery('#bar').css('width', intCount * intTickLength + 'px');
        jQuery('#timer').html('00:0' + intCount--);      

        if (intCount < 0) {
            jQuery('a').show('slow');
             jQuery('a').click(function() {
                 id = jQuery(this).parent('div').attr('id');
                 alert('current id: ' + id);
                 jQuery(this).hide();
                 timer(5);
             });
             stopTimer();
        }
    }, 1000);
}
function stopTimer() {
    clearInterval(GLOBAL_TIMER);
}

Answer 1

检查并查看这是否是您需要的：

jQuery(document).ready(function() {
    jQuery('div').hide();
    currDiv = jQuery('#one');
    timer(5);
});
// Timer
var GLOBAL_TIMER;
function timer(intCount) {
    GLOBAL_TIMER = setInterval(function() {
        var intTickLength = 5;
        jQuery('#bar').css('width', intCount * intTickLength + 'px');
        jQuery('#timer').html('00:0' + intCount--);
        if (intCount < 0) {
            currDiv.show('slow');
             currDiv.click(function() {
                 id = currDiv.attr('id');
                 alert('current id: ' + id);
                 jQuery(this).hide();
                 currDiv = currDiv.next();
                 timer(5);
             });

             stopTimer();
        }
    }, 1000);
}
function stopTimer() {
    clearInterval(GLOBAL_TIMER);
}

Answer 2

我认为

最干净的解决方案是使用 jQuery 的data()机制将一个变量附加到每个<div>，表示它是下一个要显示的变量。

此外，您在<div>元素中<a>元素，有时您会尝试显示/隐藏其中一个......在我看来，始终对同一元素进行操作会更清楚。 我选择了<div>元素。

因此，首先您需要隐藏所有<div>元素：

jQuery('div').hide();

然后，您需要指示"一个"<div>是下一个要显示的：

jQuery('#one').data('nextToBeShown',true);

然后，当您浏览每个元素时（我遍历<div> s而不是<a> s），您只需要查看它是否是下一个要显示的元素，并显示它：

jQuery('div').each(function() {
    current = jQuery(this);
    if( current.data('nextToBeShown') ) {
        current.show('slow');
    }
});

最后，当您单击链接时，您需要移动"nextToBeShowed"指针：

jQuery('a').click(function() {
    id = jQuery(this).parent('div').attr('id');
    alert('current id: ' + id);
    div = jQuery(this).parent();
    div.hide();
    div.data('nextToBeShown',false);
    div.next().data('nextToBeShown',true);
    timer(9);
});

这让你到达你想要的地方。 在这里查看我更新的jsFiddle：http://jsfiddle.net/NjUg2/1/

Answer 3

jsBin demo

参考我的旧

答案和我的旧演示给你....

您唯一需要添加的是：

////////////// old answer :  
(function($){ // remap "$" to jQuery
$(function(){ // "Document Ready" shorthand
  
  var divCounter = 0;    ///// added
  function timer(bar, intCount){  
     var elWidth = $(bar).width(), intTickLength=intCount, i;  
     function math(){
       var m = Math.floor(intCount/60);
       var s = intCount % 60;
       if(m<10){m='0'+m;}
       if(s<10){s='0'+s;}
       $(bar).next('.timer').text(m+':'+s);
       $(bar).width( elWidth*intCount/intTickLength );
       if(intCount--<=0){         
         clearInterval(i);
         showDiv();  /////// added
       }
     }
     math();
    
     i = setInterval(math, 1000);  
  }  
  timer('#bar',5); 
  ////////////////////////////////
  ///////////// new answer :  
  $('div.box').hide();  // hide all initially 
  function showDiv(){
      $('.box').hide().eq(divCounter%$('.box').length).show();
  }
  
  $('.box a').click(function(e){
      e.preventDefault();
      $('.box').hide();
      divCounter++;
      timer('#bar',5);
  });
  /////////////////////////////
});
})(jQuery);

HTML：将类.timer添加到您的范围

<span id="bar"></span>
<span class="timer">00:05</span>

并将一个通用的 CLASS 添加到您的div 元素中：

<div class="box"><a href="#">one</a></div>
<div class="box"><a href="#">two</a></div>
<div class="box"><a href="#">three</a></div>
<div class="box"><a href="#">four</a></div>

如果你有问题，请随时提出，不要拔掉更多的头发，但回顾一些旧问题以获得一些解决方案:)