Question

JS

$('input[type="checkbox"]').click(function() {
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('#main-div > div > div > div').hide();
        $('input[type="checkbox"]:checked').each(function() {
            $('#main-div > div > div > div[class=' + this.id + ']').show();
        });
    } else {
        $('#main-div > div > div > div').show();

}
});

HTML：

<input type="checkbox" id="one">
<input type="checkbox" id="two">
<input type="checkbox" id="three">

<div id="main-div">
<div>
<div>
<div class="one two other classes">
Content
</div>
</div>
</div>
</div>

<div id="main-div">
<div>
<div>
<div class="one three other classes">
Content
</div>
</div>
</div>
</div>

<div id="main-div">
<div>
<div>
<div class="two three other classes">
Content
</div>
</div>
</div>
</div>

如果使用单个类，则复选框将过滤，但在存在多个类时则不会。

如何更改以下内容以允许多个类

$('#main-div > div > div > div[class=' + this.id + ']').show();

Answer 1

您可能不想在此处使用属性选择器，因为它会查找确切的文本。您将要使用类选择器，它将只查找类的存在，而不管其他类是否存在。

$('#main-div > div > div > div.' + this.id).show();

我还建议不要像你一样使用嵌套的直接子选择器（div > div > div）。这非常脆弱，并且会在您更改HTML层次结构时中断，这在重构时会让您感到痛苦。

这样的事可能会更好：

$('#main-div .' + this.id).show();

话虽如此，您也绝不想在页面上重复使用ID。 According to Mozilla Developer Network，ID＆＃39;在文档中必须是唯一的＆＃39;。如果您曾想使用getElementById，它只返回它找到的第一个项目，而不是一个项目数组。在这种情况下，main-div应该是一个类。

Answer 2

看到这个更新的小提琴;我认为它符合您的要求：http://jsfiddle.net/RyZy8/222/。

$('input[type="checkbox"]').click(function() {
    $('.main > div > div > div').hide();
    if ($('input[type="checkbox"]:checked').length > 0) {
        $('input[type="checkbox"]:checked').each(function(i, chkBox) {
            $('.main > div > div .' + $(chkBox).attr('id')).show();
        });
    } else {
        $('#main-div > div > div > div').show();
    }
});

你不应该有多个具有相同ID的项目，所以我只是用id =＆＃34; main-div＆＃34;更改了div。 to class =＆＃34; main＆＃34;并将其放入每个循环中的选择器中。我还将代码更改为不使用此对象（虽然它产生了正确的结果），我只使用了每个回调中的参数。

Answer 3

您可以使用map()创建已检查输入数组id，然后使用*包含attr选择器来显示/隐藏该类的div。

另外，作为旁注，您不能拥有相同的id

＆＃13;

$('input[type="checkbox"]').change(function() {
  //Create array of checked input ids
  var c = $('input[type="checkbox"]:checked').map(function() {
    return $(this).attr('id');
  }).get();

  //First show all divs
  $(".one, .two, .three").show();

  //ForEach div that has class as value in array of checked input hide it
  c.forEach(function(e) {
    $('div[class*="' + e + '"]').hide();
  })
})

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" id="one">
<input type="checkbox" id="two">
<input type="checkbox" id="three">

<div>
  <div>
    <div>
      <div class="one two other classess">
        A
      </div>
    </div>
  </div>
</div>

<div>
  <div>
    <div>
      <div class="one three other classess">
        B
      </div>
    </div>
  </div>
</div>

<div>
  <div>
    <div>
      <div class="two three other classess">
        C
      </div>
    </div>
  </div>
</div>

＆＃13;

Answer 4

您有多个问题。

您在标记中重复了一个无效HTML的ID，这将导致难以调试的意外问题。
使用重复ID修复问题后，您需要使用一个类或将它们全部包装在一个带有id的容器中。
你使用一个完全匹配的属性选择器，改变它以使用类选择器:(在修复id问题并将它们全部包装之后。

选择码：

$('#main-div').find('div').filter('.' + this.id ).show();

OR

$('#main-div').find('div.' + this.id ).show();

我还建议您查看已选中/未选中的问题以及将根据选中的值确定应显示/隐藏的内容的兄弟姐妹...我会将其留给您，但它会涉及复选框更改事件。请注意，正如您所拥有的那样，所有未选中的内容都会显示所有内容，而不确定这是您的愿望。

checkbox筛选具有多个类的类显示的div

5 个答案: