在單行顯示/隱藏元素？

我正在使用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

在單行顯示/隱藏元素？

回答

相關問題