Question

我想知道是否有人能帮助我解决我遇到的问题。下面的代码是我在另一篇文章中找到的片段，但我希望稍微调整一下

Jquery

$(document).ready(function() {
$('#criteria').on("input", function(e) {
    var words = $(this).val().toLowerCase().match(/\S+/g);
    if (!words) {
        $('.links li').show();
    } else {
        $('.links li').each(function() {
            var text = $(this).text().toLowerCase();
            var show = false;
            $.each(words, function(i, word) {
                show = show || Boolean(~text.indexOf(word));
            });
            $(this).toggle(show);

        });
    }
});

}); // end document ready

和HTML

<ul class="links">
<li><a href="#">link 1</a></li>
  <li><a href="#">link 2</a></li>
  <li><a href="#">link 3</a></li>
  <li><a href="#">link 4</a></li>
</ul>

现在这样可以正常工作，它会在输入字段中查找匹配项，并通过隐藏无匹配的链接来相应地过滤结果。我想要做的而不是使用切换是为li元素添加一个类，其中没有匹配使它们使用css淡化。

我尝试过使用$（show）.addclass（）;而不是$（this）.toggle（show）;但它似乎没有做任何事情，我假设因为变量show没有使用但是当我尝试一组效果变量显示它什么都不做

Answer 1

只需使用.toggleClass()添加创建一个带有css的类，显示：无/不透明度：0.0

http://api.jquery.com/toggleClass/

Answer 2

我有一个小建议。为什么你使用大编码在text中搜索特定li。只需简单地使用contains即可根据文本搜索元素。像下面一样使用toggleClass。

您的要求可以通过以下编码来实现。

$('#criteria').on("input", function(e) {
     $('.links li:not(:has(a:contains("link 1")))').toggleClass("className");

});

DEMO

jquery实时搜索

2 个答案: