0

私はこれをいじっています：

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

私が必要としているのは、タイマーが循環した後、次のdividに進む時間です。「1」をクリックすると現在のIDが表示され、「2」、「3」に進み、それぞれの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

jsBin デモ

私の古い回答と私の古いデモを参照してください....

追加する必要があるのはこれだけです:

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

質問がある場合は、お気軽に質問してください。これ以上髪を引っ張る必要はありませんが、いくつかの解決策についていくつかの古い質問を確認してください :)

于 2012-09-14T01:29:12.873 に答える
0

最もクリーンな解決策は、jQuery のdata()メカニズムを使用して変数を each にアタッチし<div>、次に表示されるものであることを知らせることだと思います。

また、<a>要素内に<div>要素があり、どちらか一方を表示/非表示にしようとすることがあります...常に同じ要素を操作する方が明確だと思います。<div>エレメントを選びました。

<div>したがって、最初にすべての要素を非表示にする必要があります。

jQuery('div').hide();

次に、「1」<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 に答える