3

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

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

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

$(".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();
});

小提琴位于http://jsfiddle.net/2fEzS/

4

2 回答 2

6

逻辑是错误的，您实际上并没有过滤元素，而不是定义几个处理程序，您可以使用单击元素的 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') // ...
});
于 2013-08-07T14:38:32.570 回答
0

您将所有divs 隐藏在类.holder中，而不仅仅是影响contains位的 s。

将您的代码更改为：

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

它是区分大小写的，所以如果 adiv包含 'paris' 而不是 'Paris' 则不会被隐藏。

见http://jsfiddle.net/2fEzS/19/

于 2013-08-07T14:45:04.493 回答