jQueryスライスdivをn回目のクリックごとに表示しますか？

Question

クリックごとにn番目の間隔でdivをスライスできます。この例では、クリックするたびに、最初の3つのdivをスライスして非表示にします。もう一度クリックすると残りの3つのdivが非表示になります。

$(document).on('click', '#dinner', function(){ 
var command = $(this).parents('#theworld'); 
var findpizza = command.find('.pizza'); 
for (var i = 0; i < findpizza.length; i+=3){ 
findpizza.slice(0, 3).hide();} 
});  

JSFiddle： https://jsfiddle.net/crhggho5/

私はそれが永久的なdiv要素を隠しますよう、削除を使用する必要はありません。私はまた、display:noneを使用したくないので、divをまだ見えるようにし、最初のクリック後に何もしません。

Answer 1

divを非表示にするためにクラスを使用しようとしています。これは私がやることです。そうすれば、あなたは、イベントリスナーが再びヒットしたときにすでに隠されているものを除外するために、あなたのセレクタに.goneクラスを使用することができます。

$(document).on('click', '#dinner', function(){ 
    var command = $(this).parents('#theworld'); 

    //only get the slices that are not hidden 
    var findpizza = command.find(".pizza:not('.gone')"); 

    for (var i = 0; i < findpizza.length; i+=3){ 
     //hide the slices via a class with 'display: none' 
     findpizza.slice(0, 3).addClass('gone'); 
    } 
});  

Answer 2

ちょうどsliceStart & sliceEndを追跡するための2つのインデックスを作成します。

各スライスサイクルの後に、sliceEnd〜sliceStartインデックスを設定してdivを検索します。

JSコード：

var sliceStart = 0; 
var sliceEnd = 3; 
$(document).on('click', '#dinner', function() { 
    var command = $(this).parents('#theworld'); 
    var findpizza = command.find('.pizza'); 
    if (sliceStart != sliceEnd) { 
     findpizza.slice(sliceStart, sliceEnd).hide(); 
     sliceStart = sliceEnd; 
     sliceEnd += sliceEnd; 
     return; 
    } 

    //detach the click event when job is done to 
    //avoid unnecessary event handling 
    if (sliceStart === totalDivs) { 
    $(document).off('click'); 
    } 
}); 

Live Demo @ JSFiddle

注：FYI jqueryの.hide()は、内部ターゲット要素にCSSスタイルdisply:noneを設定し、それは本当にCSSスタイルdisply:noneの設定が異なるではありませんそれぞれの要素に手動ですべて