在单行显示/隐藏元素？

我正在使用ID调用一个函数。这个ID应该用于.show()与选择器匹配的元素和.hide()都没有。在单行显示/隐藏元素？

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

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

来源

2013-06-20 Marcel Otten

我觉得这种方式很好。 – tymeJV

如果你想做一些“更酷”的事情，你应该试试另一个框架，jQuery为此超重。但是如果你在jQuery中有一个很大的代码库，这是最好的解决方案。 –

如果你愿意，你可以将它改写成一行： $（'。container div'）。hide（'fast'，function（）{if（$（this）.data（'id'）== id ）$（this）.show（）;}）; 但是你的代码很好。 –

您可以使用链接& filtering：

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

中的第一选择选择在.container所有孩子的div，所以隐藏所有这些行为。过滤器根据第二个选择器获取第一个集合的子集（类似于对子元素起作用的.find()）。所以最后的show()只对被过滤的元素起作用。

来源

2013-06-20 14:45:47 MorganTiley

感谢摩根，这很有帮助！ –

你会认为这是答案吗？ :) – MorganTiley

我会的！ :)只需等6分钟，直到stackoverflow让我。 –

我认为这应该做的伎俩。

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

来源

2013-06-20 14:45:04 pethel

如果您拥有多于2个元素，则无法使用。 –

@MarcelBöttcher你是什么意思？ – pethel

-2

像这样的事情也许是你在找什么：

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

来源

2013-06-20 14:45:36 Jay

他正试图保持简单 –

我的理解是他不想'.show（）'或'。hide（）'不需要它的元素。 – Jay

一个更快替代使用filter()是使用not()：

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

你永远不必实际使用show()因为你从来没有真正隐藏它（扣除方法通过这种方式，提高了速度，没有不必要的隐藏/显示）。

jsPerf here - 它在所有浏览器中快得多，并且快于filter()在IE8/9。

来源

2013-06-20 14:46:50 lifetimes

为什么不只是只选择可见？ '$（'。container div：visible'）。hide（）' –

@Bondye：可见* *非常慢。 – lifetimes

http://jsfiddle.net/XhjNs/

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

}

来源

2013-06-20 14:47:18 proggrock

是有很多的 “办法” 来更新你的函数。

你应该检查这个Test使用console.profile();和console.profileEnd();一个真正有用的JavaScript方法（本机）。

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

你可以找到一篇关于剖析的文章Here

来源

2013-06-20 14:59:19

这里 - http://jsperf.com/test102034，我的速度是迄今为止最快的 – lifetimes

在单行显示/隐藏元素？

回答

相关问题