如何通过使用jquery选中复选框，从包含具有特定文本的div的列表中过滤元素？

Question

我正在构建一个搜索功能，每次用户开始在输入字段中键入内容时，该功能就会按其名称过滤列出的项目，同时它计算显示的项目/结果的数量。

我还添加了一个复选框，以允许用户按特定标签过滤结果。在我当前的示例中，有一个带有“ open-or-close-tag”类的div。我想要的是每次有人单击该复选框时，要隐藏其“打开或关闭标签” div中包含单词“ CLOSE”的所有元素，并且仍使已过滤项目/结果的计数正确运行。

这是我的代码：

var langMap = {}
$('#count').text($('.storesList  .store-block:visible').length);
$('#search-stores-box').keyup(function(){
    var valThis = $(this).val().toLowerCase();
	var filteredWord = getLatinWord(valThis);
	if(filteredWord == ""){
		$('.storesList .store-block').show();
		$('.storesList .store-block').removeClass('hidden-store');    
	} else {
		$('.storesList .store-block').each(function(){
		    $('.storesList .store-block').addClass('hidden-store'); 
			var text = $(this).text().toLowerCase();
			text = getLatinWord(text);
			(text.indexOf(filteredWord) > -1 ) ? $(this).show() : $(this).hide();
		});
	}
    var count = $('.storesList  .store-block:visible').length;
    $('#count').text(count);
});
function getLatinWord(word){
    return word.split('').map(function(character){
	    if (langMap[character]) {
	        return langMap[character];
	    }
	    return character;
	}).join('');
}

/* HERE IS THE EDITED CODE - NOW IT WORKS FINE */
$('#stores-open-now').on('click', function() {
if($('#stores-open-now').is(":checked")){
	$('.store-block').each(function() {
		if($(this).find('.open-or-close-tag').text() === "CLOSE"){
			$(this).hide();
		}else{
			$(this).show();
		}
	})
}else{
	$('.store-block').show();
}
var count = $('.storesList  .store-block:visible').length;
    $('#count').text(count);
});

.results-box {
  margin-bottom:10px;
  overflow:hidden;
  display:inline-block;
}

.search-area {margin-bottom:10px;}

.storesList {margin-top:20px;}
#count {display:inline-block;}

.store-block {
  width:80%;
  margin-bottom:10px;
  padding:5px;
  background:#e5e5e5;
  position:relative;
  overflow:hidden;
}

.open-or-close-tag {
  position:absolute;
  right:10px;
  top:5px;
  font-size:11px;
  font-weight:bold;
  color:blue;
}

.right{float:right;}
.left{float:left;}

.checkbox-lab {font-size:12px;font-weight:bold;cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="results-box">Number of stores:
<div id="count"></div>
</div>

<div class="search-area">
<input placeholder="Type a store name..." id="search-stores-box" type="text" />
</div>	



<div class="checkboxes-area">
<label class="checkbox-lab"><span>OPEN STORES</span>
 <input type="checkbox" id="stores-open-now">

</label>
</div>


<div class="storesList">

<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="open-or-close-tag">OPEN</div>
</div>

<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="open-or-close-tag">CLOSE</div>
</div>

<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="open-or-close-tag">CLOSE</div>
</div>



</div>

这里也是 JSFIDDLE

Answer 1

我对脚本进行了更改。您可以看看这是否是您想要的吗？

var langMap = {}
$('#count').text($('.storesList  .store-block:visible').length);
$('#search-stores-box').keyup(function(){
    var valThis = $(this).val().toLowerCase();
	var filteredWord = getLatinWord(valThis);
	if(filteredWord == ""){
		$('.storesList .store-block').show();
		$('.storesList .store-block').removeClass('hidden-store');    
	} else {
		$('.storesList .store-block').each(function(){
		    $('.storesList .store-block').addClass('hidden-store'); 
			var text = $(this).text().toLowerCase();
			text = getLatinWord(text);
			(text.indexOf(filteredWord) > -1 ) ? $(this).show() : $(this).hide();
		});
	}
    var count = $('.storesList  .store-block:visible').length;
    $('#count').text(count);
});
function getLatinWord(word){
    return word.split('').map(function(character){
	    if (langMap[character]) {
	        return langMap[character];
	    }
	    return character;
	}).join('');
}

/* HERE IS WHAT I TRIED & DIDN'T WORK */
$('#stores-open-now').on('click', function() {
if($('#stores-open-now').is(":checked")){
	$('.store-block').each(function() {
		if($(this).find('.open-or-close-tag').text() === "CLOSE"){
			$(this).hide();
		}else{
			$(this).show();
		}
	})
}else{
	$('.store-block').show();
}
});

.results-box {
  margin-bottom:10px;
  overflow:hidden;
  display:inline-block;
}

.search-area {margin-bottom:10px;}

.storesList {margin-top:20px;}
#count {display:inline-block;}

.store-block {
  width:80%;
  margin-bottom:10px;
  padding:5px;
  background:#e5e5e5;
  position:relative;
  overflow:hidden;
}

.open-or-close-tag {
  position:absolute;
  right:10px;
  top:5px;
  font-size:11px;
  font-weight:bold;
  color:blue;
}

.right{float:right;}
.left{float:left;}

.checkbox-lab {font-size:12px;font-weight:bold;cursor:pointer;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div class="results-box">Number of stores:
<div id="count"></div>
</div>

<div class="search-area">
<input placeholder="Type a store name..." id="search-stores-box" type="text" />
</div>	



<div class="checkboxes-area">
<label class="checkbox-lab"><span>OPEN STORES</span>
 <input type="checkbox" id="stores-open-now">

</label>
</div>


<div class="storesList">

<div class="store-block">
<div class="store-name">Apple Store</div>
<div class="open-or-close-tag">OPEN</div>
</div>

<div class="store-block">
<div class="store-name">Nokia Store</div>
<div class="open-or-close-tag">CLOSE</div>
</div>

<div class="store-block">
<div class="store-name">Samsung Store</div>
<div class="open-or-close-tag">CLOSE</div>
</div>



</div>