我正在尝试隐藏所有<li>
元素,然后仅显示包含子<li>
的{{1}}个文本,其中的文字与输入/搜索字段的值相匹配。
HTML:
<p>
的 JS:
<input id="search" type="text" placeholder="Search">
<ul class="items">
<li class="item">
<p class="keywords" style="display: none;">skins, hair</p>//keywords
<a class="thumb" href="#"><img src="koalahat.jpg"></a>
</li>
<li class="item">
<p class="keywords" style="display: none;">hair</p>
<a class="thumb" href="#"><img src="goosehat.jpg"></a>
</li>
</ul>
我无法弄清楚为什么将$('#search').keyup(function(){
var typed = $(this).val(); //get the input field value
$('.items li').hide() //hide all LIs...
$('.items li').filter(function(){ //filter all LIs that...
$('.items li p.keywords:contains(typed)').parent().show(); //... that contain the typed keywords, and show them.
});
console.log(typed);
})
更改为$('.items li p.keywords:contains(typed)')
会返回所需的输出,前者则不会。
答案 0 :(得分:0)
字符串连接问题。试试这个:
$('p.keywords:contains("' + typed + '")', this).parent().show();
我认为您需要的只是:
$('#search').keyup(function () {
var typed = this.value; //get the input field value
$('.items li').hide() //hide all LIs...
$('.items li').find('p.keywords:contains("' + typed + '")', this).parent().show();
console.log(typed);
})
<强> Fiddle 强>
虽然问题在于,在选择器$('.items li p.keywords:contains(typed)')
中,typed被视为字符串而不是变量,因此不会评估其值。相反,您应该将变量与字符串连接起来。而且你也可以取消过滤器,只需选择器即可。