jquery - 我如何通过使用 jquery 在复选框中单击来过滤列表中包含特定文本的元素？

Question

我有一个包含 6 个元素/div 的列表。如何通过单击/选择复选框来过滤包含特定文本的元素？对于以下示例，当我选择标记为“绿色”等的复选框时，我想过滤包含单词“绿色”的元素。

因此，当我单击“绿色”复选框时，我想隐藏所有其他不包含“绿色”一词的 div，并在取消选择复选框时显示它们。

这是我的代码:

$('#box1').change(function() {
	if($('.item-tag').text()==="Green"){
  $('.m3-item').show();
  } else {
    $('.m3-item').hide();
  }
});

body {
  font-family: 'Arial';
  color: #646464;
}

.filters {

  width: 100%;
  margin: 0 5% 0 0;
  padding: 0;
  margin-bottom:50px;
}

.m3-item {
padding:5px;
margin:3px;
background:#eee;
width:80%;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>

<div class="filters">
  <div class="continents" style="font-size:12px;">
    
    <div>Green
      <input type="checkbox" id="box1" />
    </div>
    <div>Red
      <input type="checkbox" id="box2" />
    </div>
   
   </div>

</div>

<div class="listItems">
<div class="m3-item"><div class="item-tag">Green</div></div>
<div class="m3-item"><div class="item-tag">Red</div></div>
<div class="m3-item"><div class="item-tag">Blue</div></div>
<div class="m3-item"><div class="item-tag">Green</div></div>
<div class="m3-item"><div class="item-tag">Red</div></div>
<div class="m3-item"><div class="item-tag">Green</div></div>
</div>

Answer 1

你的方法不是很有效，但它可以通过对你的 jquery 代码进行简单的更改来工作:

$('#box1').on('change', function() {
    $('.item-tag').each(function() {
        if($(this).text()==="Green"){
            $(this).parent().show();
        } else {
            $(this).parent().hide();
        }
    })
});