Question

我一直在摆弄这个：

我需要的是在计时器循环后进入下一个div id的时间。我点击“one”并显示当前的id，然后它应该前进到“two”，“three”......并显示它们各自的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

检查并查看是否需要this：

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>，表示它是下一个要显示的变量。

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

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

jQuery('div').hide();

然后，您需要指出“one”<div>是下一个要显示的内容：

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

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

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

最后，当你点击链接时，你会想要移动“nextToBeShown”指针：

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 和我以前的 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>

并为您的div元素添加一个公共CLASS：

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

如果您有任何问题可以随意提出，并且不要掏出更多头发，但请回顾一些旧问题以寻求解决方案：）

当计时器循环时，setInterval前进到下一个div

3 个答案:

jsBin demo