Question

我正在调用带有ID的函数。此ID应用于.show()与选择器匹配的元素和.hide()一切都没有。

function showAndHide(id){
    $('.container div').hide();
    $('.container div[data-id="'+id+'"]').show();
}

这有更聪明的方法吗？我想避免两次编写选择器的部分（.container div）并获得更明确的符号。

Answer 1

你可以使用chaining＆amp; filtering：

$('.container div').hide().filter('[data-id="'+id+'"]').show();

第一个选择器选择.container中的所有子div，因此隐藏所有这些子div。过滤器根据第二个选择器获取第一组的子集（类似于作用于子元素的.find()）。因此，最终show()仅对过滤后的元素起作用。

Answer 2

使用filter()的更快替代方法是使用 not() ：

$('.container div').not('[data-id="'+ id +'"]').hide();

这样你就不必实际使用show()，因为你从未真正隐藏它（方法更少，速度更快，没有不必要的隐藏/显示）。

jsPerf here - 它在所有浏览器中都快得多，并且在filter()中的速度加倍IE8/9。

Answer 3

我认为这应该可以解决问题。

$('.container div, .container div[data-id="'+id+'"]').toggle();

Answer 4

http://jsfiddle.net/XhjNs/

function showAndHide(id){
$('.container div').not('[data-id="'+id+'"]').hide();

}

Answer 5

有很多“方法”来更新你的功能。

您应该使用console.profile();和console.profileEnd();检查Test这是一个非常有用的Javascript方法（原生）。

@MorganTyle发布的解决方案在呼叫和整体表现方面似乎是最好的，所以你应该跟着他。

您可以找到有关分析Here

的文章

Answer 6

这样的事情可能就是你在寻找的东西：

function showAndHide(id){
    $('.container div').each(function () {
        var t = $(this);
        if(t.data("id") == id) {
            t.show();
        } 
        else { 
            t.hide();
        }
    }
}

在一行中显示/隐藏元素？

6 个答案: