使用 :contains 的 JQuery 过滤器

Question

我对这一切都很陌生，并且在使用 :contains 过滤一堆 div 时很难识别父元素？ 我的最终结果是有 3 个按钮，单击它们时检查 div 是否包含特定单词，如果是，则将一个类应用于包含的 div，并将另一个类应用于所有其他 div...本质上是隐藏和显示它们。

我有一个 fiddle ，它不起作用，但显示了我正在尝试创建的想法。

我知道的代码不起作用，但给出的过程是；

$(".manchester").click(function (e) {
    if ($('.address:contains("Manchester")').length) {
        $('holder').addClass('visible');
    }
    if ($('.address:contains("London")').length) {
        $('.holder').addClass('invisible');
    }
    if ($('.address:contains("Paris")').length) {
        $('.holder').addClass('invisible');
    }
    e.preventDefault();
});

fiddle 位于http://jsfiddle.net/2fEzS/

Answer 1

逻辑是错误的，您实际上并没有过滤元素，您可以通过使用单击元素的 textContent 来缩小代码，而不是定义多个处理程序。我建议:

$(".filter div").click(function(e) {
    $('.holder').hide() // hide all the selected elements
                .filter(':contains(' + $(this).text()  + ')')
                .show(); // show the filtered elements
});

或者:

$(".filter div").click(function (e) {
    $('.holder').addClass('invisible')
                .removeClass('visible')
                .filter(':contains(' + $(this).text()  + ')')
                .removeClass('invisible')
                .addClass('visible');
});

http://jsfiddle.net/kdRzQ/

请注意，div 元素不应用作按钮，并且它没有要阻止的默认操作，因此 preventDefault 不会执行任何操作你的代码。此外，如果文档中有很多元素，最好将这些元素缓存在点击处理程序上下文之外:

var $holders = $('.holder');   
$(".filter div").click(function (e) {
    $holders.addClass('invisible') // ...
});