Question

我想删除添加的DIV's（类条带），然后仅在可见的DIVs上应用它，但我被卡住了。好像我不明白脚本是如何处理的。任何帮助表示赞赏！

$('.item').each(function(i,e){
    if (((i+1) % 2) == 0)
        $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />\n\n');
});
$(":button").click(function() {
    var selectedcolor = this.value;
    var list = $(".item");
    $(list).fadeOut("fast");
    $(list).each(function(index) {
        var color = $(this).data("color");
        if (color == selectedcolor){
            $(this).fadeIn("fast");
        }
    });
$('.stripe').contents().unwrap();
$('.item:visible').each(function(i,e){
    if (((i+1) % 2) == 0)
        $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />\n\n');
    });
});

Answer 1

试试这个。我简化了你的代码。

  function UpdateStrips(){ 
   $('.item:visible:odd').each(function(){  
        $(this).wrap('<div class="stripe"/>');  
   });
 }

$(":button").click(function() {
        var selectedcolor = this.value;
        var list = $(".item");
        $(list).fadeOut("fast");
        $(list).each(function(index) {
            if($(this).closest('div.stripe').length) 
                $(this).unwrap();  // unwrap only the elements with parent div with class stripe
              var color = $(this).data("color");
              if (color == selectedcolor)
                 $(this).fadeIn("fast",function()
                 {
                    UpdateStrips();  // invoke callback once the fadeIn completes
                 });
        });         
});

UpdateStrips(); // invoke on page load

工作示例：https://jsfiddle.net/DinoMyte/c98rxbju/29/

Answer 2

使用fadeIn and fadeOut代替show and hide with time delays，然后获得规定的输出。

$('.item').each(function(i) {
  if (((i + 1) % 2) == 0)
    $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />');
});
$(":button").click(function() {
  var selectedcolor = this.value;
  var list = $(".item");
  $(list).hide();
  $(list).each(function(index) {
    var color = $(this).data("color");
    if (color == selectedcolor) {
      $(this).show();
    }
  });
  $('.stripe').contents().unwrap();
  $('.item:visible').each(function(i) {
    if (((i + 1) % 2) == 0)
      $(this).wrapAll('<div class="stripe" style="background-color: #887733;" />\n\n');
  });
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button value="blue" type="button">Blue</button>
<button value="black" type="button">Black</button>
<button value="white" type="button">White</button>
<div id="wrapper">
  <div class="item" data-color="blue">Toyota</div>
  <div class="item" data-color="blue">Nissan</div>
  <div class="item" data-color="blue">Volvo</div>
  <div class="item" data-color="blue">Ford</div>
  <div class="item" data-color="black">Chevrolet</div>
  <div class="item" data-color="white">BMW</div>
  <div class="item" data-color="white">Mercedes</div>
  <div class="item" data-color="blue">Mercedes</div>
  <div class="item" data-color="black">Nissan</div>
  <div class="item" data-color="white">Fiat</div>
  <div class="item" data-color="white">Volvo</div>
</div>

检查这个工作小提琴：here

单击按钮后删除DIV

2 个答案: