如何通过使用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();
        }
    })
});