1

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

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

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

4

6 回答 6

8

您可以使用链接和过滤：

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

第一个选择器选择 中的所有子 div .container，因此 hide 作用于所有这些。过滤器根据第二个选择器（类似于.find()作用于子元素的选择器）获取第一个集合的子集。所以 finalshow()只作用于过滤后的元素。

于 2013-06-20T14:45:47.727 回答
2

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

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

这样您就不必实际使用show()它，因为您永远不会真正隐藏它（更少的方法，提高的速度，没有不必要的隐藏/显示）。

这里的 jsPerf - 它在所有浏览器中都快得多，并且filter()是IE8/9.

于 2013-06-20T14:46:50.467 回答
0

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

$('.container div, .container div[data-id="'+id+'"]').toggle();
于 2013-06-20T14:45:04.680 回答
0

http://jsfiddle.net/XhjNs/

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

}
于 2013-06-20T14:47:18.240 回答
0

有很多“方法”可以更新您的功能。

您应该检查使用和一个非常有用的 Javascript 方法（本机）进行的测试。console.profile();console.profileEnd();

@MorganTyle 发布的解决方案在调用和整体性能方面似乎是最好的，所以你应该关注他。

您可以在此处找到有关分析的文章

于 2013-06-20T14:59:19.990 回答
-2

像这样的东西可能是你正在寻找的东西：

function showAndHide(id){
    $('.container div').each(function () {
        var t = $(this);
        if(t.data("id") == id) {
            t.show();
        } 
        else { 
            t.hide();
        }
    }
}
于 2013-06-20T14:45:36.943 回答