Question

我希望能够按每次点击的第n个间隔切片我的div。所以对于这个例子，每次我点击，我希望我的函数切片前三个div并隐藏它们。如果我再次点击，则隐藏其余三个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

只需创建2个索引即可跟踪sliceStart＆amp; sliceEnd。

在每个切片循环后，将sliceEnd设置为sliceStart索引以寻找div。

JS CODE：

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手动设置为所有各自的元素

jQuery slice div每次点击第n个间隔？

2 个答案: