如果所有 Li 都被隐藏,则显示消息
Show message if all Li are hidden
我想要的是,如果 keyup()
如果所有的 li 都被隐藏,那么显示一个特定的 div.I 以下是我的 Jquery 代码。目前正在发生的事情是 div 在它第一次遇到它的成功场景时显示,我的 fiddle 会更多地解释这个场景。
var showMessage = false;
function filter(element) {
var value = $(element).val();
$(".dropd > li").each(function () {
if ($(this).text().indexOf(value) > -1) {
$(this).show();
} else {
showMessage = true;
$(this).hide();
}
});
if (showMessage == true) {
alert(showMessage + '111');
$('.dropd').find('#not_matches').hide();
}
}
$('#txt_colors').keyup(function () {
filter(this);
});
以下是我的HTML
<div id="dd2" class="wrapper-dropdown-2" tabindex="1">
<div class="selected" style="margin-right:30px;"> select Color</div>
<ul class="dropd"> <input id="txt_colors" type="text"/>
<div id="not_matches" name="not_matches" style="display: none;"> No Matching Color </div>
<li onclick="search_ral_pantone('000000')" value="000000" style="border-right-color:#000000"><a>Black</a></li>
<li onclick="search_ral_pantone('0000FF')" value="0000FF" style="border-right-color:#0000FF"><a>Blue</a></li>
<li onclick="search_ral_pantone('808080')" value="000000" style="border-right-color:#808080"><a>Gray</a></li>
<li onclick="search_ral_pantone('00FF00')" value="00FF00" style="border-right-color:#00FF00"><a>Green</a></li>
<li onclick="search_ral_pantone('800000')" value="800000" style="border-right-color:#800000"><a>Maroon</a></li>
<li onclick="search_ral_pantone('800080')" value="800080" style="border-right-color:#800080"><a>Purple</a></li>
<li onclick="search_ral_pantone('FF0000')" value="FF0000" style="border-right-color:#FF0000"><a>Red</a></li>
<li onclick="search_ral_pantone('C0C0C0')" value="C0C0C0" style="border-right-color:#C0C0C0"><a>Silver</a></li>
<li onclick="search_ral_pantone('FFFFFF')" value="FFFFFF" style="border-right-color:#FFFFFF"><a>White</a></li>
<li onclick="search_ral_pantone('FFFF00')" value="FFFF00" style="border-right-color:#FFFF00"><a>Yellow</a></li>
</ul>
</div>
Fiddle:http://jsfiddle.net/13y6b7jj/1/(只是为了说明实际情况)
现在我明白了问题所在。你可以这样做:
if ($(".dropd > li:visible").length === 0)
您可以通过以下代码检查是否有任何 li 可见:
$(".dropd li:visible").length
你应该使用这个:
function filter(element) {
var value = $(element).val();
var count = 0;
$(".dropd > li").each(function () {
if ($(this).text().indexOf(value) > -1) {
$(this).show();
count++;
} else {
$(this).hide();
}
});
if (count != 0)
{
$('.dropd').find('#not_matches').hide();
}
else{
$('.dropd').find('#not_matches').show();
}
}
如果传入的选择器 .is
匹配堆栈中至少 1 个元素,它将 return 为真。您只需要反转值 returned :
function filter(element) {
var value = $(element).val();
var $li = $(".dropd > li").each(function () {
if ($(this).text().indexOf(value) > -1) {
$(this).show();
} else {
$(this).hide();
}
// Alternative code here :
// $(this).toggle($(this).text().indexOf(value) > -1);
});
if (! $li.is(':visible')) {
alert(showMessage + '111');
$('.dropd').find('#not_matches').hide();
}
}
您只需要修改您的代码。您将消息隐藏在需要显示的位置,反之亦然
if (showMessage) {
$('.dropd').find('#not_matches').show();
} else {
$('.dropd').find('#not_matches').hide();
}
我想要的是,如果 keyup()
如果所有的 li 都被隐藏,那么显示一个特定的 div.I 以下是我的 Jquery 代码。目前正在发生的事情是 div 在它第一次遇到它的成功场景时显示,我的 fiddle 会更多地解释这个场景。
var showMessage = false;
function filter(element) {
var value = $(element).val();
$(".dropd > li").each(function () {
if ($(this).text().indexOf(value) > -1) {
$(this).show();
} else {
showMessage = true;
$(this).hide();
}
});
if (showMessage == true) {
alert(showMessage + '111');
$('.dropd').find('#not_matches').hide();
}
}
$('#txt_colors').keyup(function () {
filter(this);
});
以下是我的HTML
<div id="dd2" class="wrapper-dropdown-2" tabindex="1">
<div class="selected" style="margin-right:30px;"> select Color</div>
<ul class="dropd"> <input id="txt_colors" type="text"/>
<div id="not_matches" name="not_matches" style="display: none;"> No Matching Color </div>
<li onclick="search_ral_pantone('000000')" value="000000" style="border-right-color:#000000"><a>Black</a></li>
<li onclick="search_ral_pantone('0000FF')" value="0000FF" style="border-right-color:#0000FF"><a>Blue</a></li>
<li onclick="search_ral_pantone('808080')" value="000000" style="border-right-color:#808080"><a>Gray</a></li>
<li onclick="search_ral_pantone('00FF00')" value="00FF00" style="border-right-color:#00FF00"><a>Green</a></li>
<li onclick="search_ral_pantone('800000')" value="800000" style="border-right-color:#800000"><a>Maroon</a></li>
<li onclick="search_ral_pantone('800080')" value="800080" style="border-right-color:#800080"><a>Purple</a></li>
<li onclick="search_ral_pantone('FF0000')" value="FF0000" style="border-right-color:#FF0000"><a>Red</a></li>
<li onclick="search_ral_pantone('C0C0C0')" value="C0C0C0" style="border-right-color:#C0C0C0"><a>Silver</a></li>
<li onclick="search_ral_pantone('FFFFFF')" value="FFFFFF" style="border-right-color:#FFFFFF"><a>White</a></li>
<li onclick="search_ral_pantone('FFFF00')" value="FFFF00" style="border-right-color:#FFFF00"><a>Yellow</a></li>
</ul>
</div>
Fiddle:http://jsfiddle.net/13y6b7jj/1/(只是为了说明实际情况)
现在我明白了问题所在。你可以这样做:
if ($(".dropd > li:visible").length === 0)
您可以通过以下代码检查是否有任何 li 可见:
$(".dropd li:visible").length
你应该使用这个:
function filter(element) {
var value = $(element).val();
var count = 0;
$(".dropd > li").each(function () {
if ($(this).text().indexOf(value) > -1) {
$(this).show();
count++;
} else {
$(this).hide();
}
});
if (count != 0)
{
$('.dropd').find('#not_matches').hide();
}
else{
$('.dropd').find('#not_matches').show();
}
}
如果传入的选择器 .is
匹配堆栈中至少 1 个元素,它将 return 为真。您只需要反转值 returned :
function filter(element) {
var value = $(element).val();
var $li = $(".dropd > li").each(function () {
if ($(this).text().indexOf(value) > -1) {
$(this).show();
} else {
$(this).hide();
}
// Alternative code here :
// $(this).toggle($(this).text().indexOf(value) > -1);
});
if (! $li.is(':visible')) {
alert(showMessage + '111');
$('.dropd').find('#not_matches').hide();
}
}
您只需要修改您的代码。您将消息隐藏在需要显示的位置,反之亦然
if (showMessage) {
$('.dropd').find('#not_matches').show();
} else {
$('.dropd').find('#not_matches').hide();
}