0

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

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 没有被使用但是当我尝试对变量显示的一类效果时它什么也没做

4

2 回答 2

0

只需使用.toggleClass()add 创建一个带有 css 的类 display:none / opacity:0.0

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

于 2012-10-23T12:31:43.713 回答
0

我有一个小建议。为什么您使用大型编码来搜索特定text的li. 只是简单地你可以使用contains来基于文本搜索元素。使用如下的切换类。

您的要求可以通过以下编码来完成。

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

});

演示

于 2012-10-23T12:57:14.743 回答