0

我一直在摆弄这个：

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);
}
4

3 回答 3

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);
}
于 2012-09-14T01:43:03.163 回答
0

我认为最简洁的解决方案是使用 jQuery 的data()机制将变量附加到 each <div>，表示它是下一个要显示的变量。

此外，您的<a>元素中有<div>元素，有时您会尝试显示/隐藏其中一个……在我看来，始终对同一个元素进行操作会更清楚。我选择了<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');
    }
});

最后，当您单击链接时，您需要移动“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/

于 2012-09-14T01:00:48.060 回答
0

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>

并为您的 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>

如果您有任何问题，请随时提出，不要扯更多头发，而是查看一些旧问题以获得一些解决方案:)

于 2012-09-14T01:29:12.873 回答