在多個Javascript變量上更改CSS

快速回答所有人。我知道你可以選擇使用jQuery多個元素，並在一行代碼更改CSS屬性，像這樣：在多個Javascript變量上更改CSS

 $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2").css({ 'position' : 'absolute', 'opacity' : '0'});

但最近我在聽ShopTalk播客，在此期間，他們提到，這是一個更好的主意來分配所有的DOM查找到Javascript文件開頭的變量，然後在整個文件中使用該變量。這是我做的，但是當我到了需要更改所有這些元素的CSS的地步時，我意識到除了爲每個元素編寫一行代碼之外，我想不出另一種方式來實現，例如：

n2.css({ 'position' : 'absolute', 'opacity' : '0'}); 
    n3.css({ 'position' : 'absolute', 'opacity' : '0'}); 
    n4.css({ 'position' : 'absolute', 'opacity' : '0'}); 
    n5.css({ 'position' : 'absolute', 'opacity' : '0'}); 
    n6.css({ 'position' : 'absolute', 'opacity' : '0'});

是否有更簡潔的方式來改變所有這些變量的CSS等價於單行jQuery方式？我可以創建一個數組，然後遍歷它們，但是這幾乎會打敗在同一個項目上不執行多個DOM查找的性能點...

我確定有一些簡單的事我忘記了，謝謝！

來源

2016-07-24 Jake Evans

也許他們並不意味着字面上分配所有的不同的元素單獨分開變量。根據您的預期用途，它應該比這更靈活。因此，如果您希望稍後將其作爲單個組執行操作，那麼可以在開頭指定一個包含所有這些元素的變量（特別是如果您想在腳本期間多次執行此操作） – ADyson

簡單的解決方案：

如果你已經有多個變量定義，你可以select them all with a jQuery selector function，然後就在那一個選擇執行CSS：

$([ n2, n3, n4, n5, n6 ]).each(function() { 
    $(this).css({ 'position' : 'absolute', 'opacity' : '0'}); 
});

更新：編輯以上的exaple上班。必須用each()函數迭代這個。

替代解決方案：

如果你有類似的操作多次，或者：

像其他的答案說，所有元素的選擇到一個單一的jQuery的變量（不靈活的解決方案）。
爲所有變量添加一個公共類，然後對該類進行操作（動態解決方案）。

來源

2016-07-24 22:11:40

因此，我嘗試了您的示例，但直到我先執行.each（）然後在函數內部添加一個$（this）.css（）。 –

@JakeEvans如果這解決了你的問題，考慮接受向社區表明它幫助！ –

他們的意思大概是這樣，您使用的變量example保存查詢，然後用它在你需要它這樣的代碼會是這樣：

var example = $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2") 

// when you need to change props of elements selected by query in example you use : 

example.css({ 'position' : 'absolute', 'opacity' : '0'});

來源

2016-07-24 22:09:29

您會看到後面的文本，將所有DOM查找分配給一個變量，然後改用該變量。這正是他們正在談論的，而不是將其分割爲每個'custom - * - * - *'的變量 –

的一點是，你必須減少dom查詢的數量，因爲它們「成本」。在需要的時候

，而不是

$("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2") 
    .css({ 'position' : 'absolute', 'opacity' : '0'});

做

var elements = $("#custom-h1-id-6, #custom-h1-id-5, #custom-h1-id-4, #custom-h1-id-3, #custom-h1-id-2")

在你的代碼的開頭，並使用該變量：：但是邏輯是一樣的

elements.css({ 'position' : 'absolute', 'opacity' : '0'});

請也考慮使用一個更簡單的查詢，例如一個普通的類名，而不是所有不同的ID，如果poss IBLE。它更可讀和高效。

來源

2016-07-24 22:11:06

他們提到，這是一個好主意，你所有的DOM查找的分配給變量在你的JavaScript文件開頭

更準確地說，這是一個好主意，緩存文檔的查詢中代碼的初始化區域。

區別是微妙的。另外你的問題幾乎使得它聽起來像你在變量中單獨緩存每個元素 - 沒有必要這樣做。只要將它分配給一個變量，就可以「緩存」jQuery結果集，然後只要文檔結構保持不變，就可以重用它。

jQuery仍然需要更新DOM才能更改CSS，不同之處在於，如果您對緩存變量進行操作，它將不必再次搜索那些元素。在這種情況下，不需要單獨操作元素，jQuery將爲您處理這些元素。

所有的元素都是由id引用的，因此無論如何lookups都會很快。在優化太多之前，擔心您的代碼具有邏輯意義。

來源

2016-07-24 22:16:43 Lunster

感謝您的細微的解釋。任何想法爲什麼選擇ID很快？按類別查找顯着較慢？ –

通過id查找通常更快，因爲它是唯一的標識符，並且可以針對編譯器的搜索進行優化。在內部，jQuery通常使用瀏覽器原生的'getElementById（）'，而不是較慢的CSS樣式選擇器查詢查找。現代瀏覽器在進行這些搜索時速度非常快，但#id是最快的。由於多種原因，類查找速度較慢 - 它們可以返回許多結果，但在小型應用程序中，它們無需擔心。 – Lunster

得到這個工作主要歸功於Jonathan Lam的迴應。以下是我的工作：

$([ n2, n3, n4, n5, n6 ]).each(function() { 
     $(this).css({ 'position' : 'absolute', 'opacity' : '0'}); 
});

來源

2016-07-24 22:30:18

jQuery仍然會使用for循環來設置所有元素的內聯樣式，該部分是不可避免的。正如你和其他人所提到的，你可以通過緩存查找來獲得更好的性能，但在這種情況下，這些ID查找已經足夠快 - $("#hello")比$(".hello")快得多。你可以做的雖然是，如果可能的話，避免使用內嵌樣式就像你的榜樣，並創建你加個班什麼/刪除所有匹配的元素：

$("#hello1, #hello2, #hello3").addClass("invisible")

來源

2016-07-24 23:41:32 Gunchars

在多個Javascript變量上更改CSS

回答

相關問題