切換可見性時的DOM操作性能

Question

我在包裝div中有一堆圖像。 除了一個用戶單擊，我需要隱藏所有這些。
最簡潔的方式是什么？ 我應該對所有它們都應用類以隱藏所有它們，然后過濾掉被單擊的那個並僅顯示一個，還是應該在遍歷循環時將它們全部隱藏，除了被單擊的那個或其他什么東西以外，我應該對它們全部進行循環？

TNX

Answer 1

在現代桌面瀏覽器中，您不會看到任何區別。 對瀏覽器進行了調整，使其能夠快速呈現DOM 3的任何更改。 膽量告訴我，遍歷所有圖像並設置可見性可能會更快，具體取決於使用style屬性而不是使用class所單擊的項目。 這樣，您只需要處理N個元素，就不會涉及任何外部CSS文件。 如果隱藏所有元素並顯示單擊了的元素，則將處理N + 1個元素。

在您的情況下，從開發人員的角度來看，我將使用最快，更易管理且更干凈的解決方案，因為如果使用一種或另一種方法，最終結果不會有太大差異。

Answer 2

最有效的方法之一是讓CSS進行可見性檢查。 在我看來，您一次只顯示一個，在這種情況下，您可以使用類通過兩個DOM操作來完成；

// scope above
var lastClicked = null;

// then  in click listener, 1st param `e`
if (lastClicked) lastClicked.className = ''; // remove visible class
lastClicked = e.target; // get clicked node
lastClicked.className = 'visible'; // add visible class

我假設使用event.target但是根據偵聽器的連接方式，您可能要使用this邏輯或其他邏輯。 此外，如果您希望支持element.classList ，則可以使用add和remove 。

---

如何僅顯示類令牌visible節點的CSS示例。

selector:not(.visible) {
    display: none;
}

Answer 3

PS：如果使用的是jquery，則可以使用以下命令：

可以說，您的div具有id ='test-div'，並且其中包含多個圖像。 所有這些圖像可以通過以下方式訪問：

$('#test-div img')

現在，假設您知道被點擊的圖像的ID。 假設id ='my-image'。

您可以執行以下命令隱藏所有其他圖像（“ my-image”除外）：

$('#test-div img').not('#my-image').addClass('hide')