jQuery hide（），show（）或html（）

Question

我有一個

<div id="content">
</div>

和三個存儲不同html的js變量： content1 ， content2和content3 。

通過用戶交互，上述div的內容更改為js變量中存儲的內容之一。

最好是通過用戶交互將div內容直接設置為我需要的內容：

$("#content").html(content2);

或將div結構更改為：

<div id="content">
    <div id="c1">
        // value of content1 variable here
    </div>
    <div id="c2">
        // value of content2 variable here
    </div>
    <div id="c3">
        // value of content3 variable here
    </div>
</div>

然后對該內部塊執行hide()和show() ，即當我希望顯示content2時：

$("#c1").hide();
$("#c2").show();
$("#c3").hide();

？

Answer 1

我會說隱藏並顯示div。

它的強度較低，並且如果javascript變量中的內容恰好包含要綁定的元素，則每次刷新內容時都不必重新綁定，並且如果您希望不同內容之間具有某種動畫效果，多個div也允許這樣做。

附帶一提，使用jQuery可以減少執行類似操作的代碼

$("#c2").show().siblings().hide();

Answer 2

兩者並不是真正的全部-可比較，因為它們做的是不同的事情。 他們可能會給出相似的看法，但是就標記而言，發生的事情並不相同。 實際上，看到.html('Something').show()鏈接在一起的情況並不少見。

• 將字符串傳遞給.html()替換所選元素的內容 ，它不會影響元素本身。
• 調用.show()或.hide() 僅影響元素本身-所有的后代保持完全相同，他們只是因為沒有顯示他們的父母都看不出來。

通過使用.html()您將替換元素中的所有內容。 對這些降序元素的所有引用將變為未定義，並且直接（未委托）事件偵聽器也將丟失。

.show() .hide()和.show()完全按照他們說的做。 您元素中的數據仍然保留，事件處理程序仍然保留，通過display: none全部被“隱藏” display: none 。

如果內容是動態變化的，沒有頁面加載，使用.html()如果沒有， .show()和.hide()是比較合適的。

Answer 3

為了易於使用和使代碼看起來更簡潔，使用HTML設置內容是正確的選擇！

將其視為您要嘗試的操作，1 DIV =>可以包含3種不同的內容，您可以通過JS對其進行操作。

因此，在第一個解決方案中，實際上有一個div並通過JS進行操作：

$("#content").html(content1);
$("#content").html(content2);
$("#content").html(content3);

而在第二種解決方案中，您實際上是使用4個div來實現相同的功能！ 所以可以肯定，如果您可以對1 div進行處理。 那是首選的方式。

兩者對於JS來說都是平等的，但是使用第二種方法，考慮到內容很大，HTML將包含更多代碼。

Answer 4

我認為最好的解決方案是將不同的內容存儲到三個變量中，然后將選定的內容分配給div

$("#content").html(content2);

這樣，您的DOM樹上少了三個節點

Answer 5

兩種選擇之間沒有太大區別。 可能會影響此的一個因素是您要更改的內容的實際大小。 如果內容相對較小，那么選擇哪種方式都沒關系。

要考慮的另一件事是content變量的三個版本的可用性。 如果每次加載時都必須獲取此HTML內容，則在將其顯示給用戶之前預先填充該內容可能很有意義，這樣可以節省加載時間。 然后只顯示/隱藏適當的內容。