我正在构建一个搜索功能,每当用户开始在输入字段中输入时,它就会按名称过滤列出的元素,同时它会计算显示的元素/结果的数量。
我还添加了一个复选框,允许用户按特定标签过滤结果。在我当前的示例中,有一个类为“open-or-close-tag”的 div。我想要的是每次有人单击该复选框时,隐藏他们的“打开或关闭标签”div 包含单词“关闭”的所有元素,并仍然保持过滤元素/结果的计数正常工作。
这是我的代码:
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
最佳答案
我已经对脚本进行了更改。你能看看这是否是你想要的吗?
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>
关于jquery - 我如何通过使用 jquery 单击复选框来过滤包含具有特定文本的 div 的列表中的元素?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/52238932/