jQuery隐藏所有元素

Question

我的函数隐藏所有元素。在输入黑色被选中。能否请您解释我为什么它的发生，如果你想检查代码，那么你可以去我的网站http://newseinstein.com/Rwork/index.php/Listing

$(".color").click(function() { 
 
    var color = []; 
 
    var i = 0; 
 

 
    $(".color").each(function() { 
 
    if (!$(this).prop("checked")) { 
 
     $("*[data-color]").val($(this).val()).hide(); 
 
    } 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-color="black">Color black</div> 
 
<div data-color="black">Color black</div> 
 
<div data-color="black">Color black</div> 
 
<div data-color="yellow">Color yellow</div> 
 
<div data-color="red">Color red</div> 
 
<div data-color="red">Color red</div> 
 

 

 
<input type="checkbox" class="checkbox color" name="color[]" value="Black"> 
 
<input type="checkbox" class="checkbox color" name="color[]" value="yellow"> 
 
<input type="checkbox" class="checkbox color" name="color[]" value="red">

Answer 1

的问题是因为你使用的val()的制定者。然后返回所有正在迭代的元素，然后调用hide()。

要解决此问题，您可以根据属性data-color属性选择元素，然后根据复选框的checked属性的状态切换它们。试试这个：

$(".color").click(function() { 
 
    var color = []; 
 
    var i = 0; 
 

 
    $('.color').each(function() { 
 
    $('div[data-color="' + this.value + '"]').toggle(this.checked); 
 
    }); 
 
})

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div data-color="black">Color black</div> 
 
<div data-color="black">Color black</div> 
 
<div data-color="black">Color black</div> 
 
<div data-color="yellow">Color yellow</div> 
 
<div data-color="red">Color red</div> 
 
<div data-color="red">Color red</div> 
 

 
<input type="checkbox" class="checkbox color" name="color[]" value="black"> 
 
<input type="checkbox" class="checkbox color" name="color[]" value="yellow"> 
 
<input type="checkbox" class="checkbox color" name="color[]" value="red">

另外请注意，您设置一个复选框的value到Black，当它应该是black到的数据属性值的情况相匹配。

Answer 2

您正在使用.val()设置值，然后使用.hide()隐藏所有。你需要hide()所有div的，然后只显示过滤元素

var divs = $("div[data-color]"); //Get all elements 
 
var colors = $(".color").change(function() { 
 
    divs.hide(); //Start with hiding all 
 
    //iterate checked checkboxes 
 
    colors.filter(':checked').each(function() { 
 
    //filter element based on attribute and show 
 
    divs.filter("[data-color='" + $(this).val() + "']").show(); 
 
    }); 
 
})

div[data-color] { 
 
    display: none 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<input type="checkbox" class="checkbox color" name="color[]" value="black"> 
 
<input type="checkbox" class="checkbox color" name="color[]" value="yellow"> 
 
<input type="checkbox" class="checkbox color" name="color[]" value="red"> 
 
<br> 
 

 
<div data-color="black">Color black</div> 
 
<div data-color="black">Color black</div> 
 
<div data-color="black">Color black</div> 
 
<div data-color="yellow">Color yellow</div> 
 
<div data-color="red">Color red</div> 
 
<div data-color="red">Color red</div>

Answer 3

因为你不检查你的数据的价值正确的属性。

你正在做的是选择具有data-color属性的所有元素 - 不管设置为什么 - 然后设置该元素的值（有趣的，在<div>上），然后隐藏它。您只需选择data-color属性与您要查找的元素匹配的元素。

$(".color").click(function(){ 
    var color = []; 
    var i = 0; 

    $(".color").each(function(){ 
     var selectedColor = $(this).val(); 
     if (!$(this).prop("checked")) { 
      $("*[data-color='" + selectedColor + "']").hide(); 
     } 
    }); 
})