Question

我是所有这一切的新手并且在使用时难以识别父元素：contains来过滤一堆div？我的最终结果是有三个按钮，当点击时检查一个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/

Answer 1

逻辑错误，您实际上没有过滤元素，而不是定义多个处理程序，您可以使用clicked元素的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在代码中不执行任何操作。此外，如果文档中有许多元素，最好将元素缓存在click处理程序的上下文之外：

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

Answer 2

您隐藏了div个类.holder，而不是只隐藏了影响contains位的$(".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(); });个。{/ p>

将您的代码更改为：

div

如果{{1}}包含'paris'而不是'Paris'而不会被隐藏，则区分大小写。

请参阅http://jsfiddle.net/2fEzS/19/

JQuery过滤器使用：contains

2 个答案: