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();
        }
    });
})

jQuery隐藏所有元素

3 个答案: