在一行中顯示/隱藏元素？

Question

我正在調用帶有ID的函數。 此ID應該被用來.show()的元件（一個或多個）匹配的選擇器和.hide()一切沒有。

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

有沒有更聰明的方法呢？ 我想避免兩次編寫選擇器的部分（ .container div ），並獲得更清晰的表示法。

Answer 1

您可以使用鏈接和過濾 ：

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

第一個選擇器選擇.container所有子div，因此對所有這些子.container hide操作。 過濾器基於第二個選擇器獲取第一組的子集（類似於作用於子元素的.find() ）。 因此，最終的show()僅作用於過濾后的元素。

Answer 2

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

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

這樣，您就不必真正使用show()因為您從未真正隱藏它（較少的方法，提高了速度，沒有不必要的隱藏/顯示）。

jsPerf在這里 -它在所有瀏覽器中都快得多，是IE8/9 filter()兩倍。

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.profile(); 和console.profileEnd(); 一個非常有用的Javascript方法（本機）。

@MorganTyle發布的解決方案在通話和整體性能上似乎是最好的，因此您應該關注他。

您可以在此處找到有關分析的文章

Answer 6

這樣的東西也許就是您想要的：

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