問題，使用關聯數組（DOM對象）和我的功能循環

Question

知識：第一週的Javascript

我想學習真正的javascript和jquery的避免不惜一切代價。現在，我是我最近了解到，ID可以很容易的風格，但不是類。爲了設計一個類，我需要循環遍歷該類的dom。我的原始代碼有效，但是我的新代碼沒有。除了一段時間的最佳做法，我試圖瞭解這是如何工作的，無論它是否是一個完美的解決方案。

問題細節：在我的新代碼中，我將兩個get函數存儲在關聯數組中的鍵中。所以我有我想要循環理解的對象。我試圖讓它像我的第一個代碼一樣工作。

我試過：老實說，我讀了一些關於方括號表示法以及它如何有用的信息。我感到有點不知所措。我試過的是：

source[_class][i] 

也許_class是未定義的，即使我定義了它。我指定了什麼類包含。老實說，我會失去，並希望得到一些幫助，當然我也歡迎最佳實踐建議。

我想成爲一個更好的程序員，我將不勝感激。我不想從jQuery開始。

我的實驗：

setTimeout(function() { 
    var source = {_id: document.getElementById('box'), 
        _class: document.getElementsByClassName('hint')}; 

    for (var i = 0; i < source[_class].length; i++) { 
     source[_class + i].style.opacity = '0'; 
     console.log(i); 
    } 
}, 1000); 

---

我原來的工作代碼：

// setTimeout(function() { 
// var divs = document.getElementsByClassName('hint'); 

// for (var i = 0; i < divs.length; i++) { 
//  divs[i].style.opacity = '0'; 
//  console.log(i); 
// } 
// }, 1000); 

Answer 1

使用source._class.length而不是source[_class].length和source._class[i]代替source[_class + i]：

for (var i = 0; i < source._class.length; i++) { 
    source._class[i].style.opacity = '0'; 
    console.log(i); 
} 

source是一個對象，具有財產_class。您可以通過source._class或source['_class']訪問屬性。

屬性source._class本身是DOM節點的集合，因此它可以像數組一樣訪問。你可以像這樣訪問數組元素：array[index]。

所以，你必須既具有屬性一個對象和數組元素。您需要適當地訪問他們的內容。

Answer 2

你錯過了一個括號，它的文本不是一個變量：

source[_class + i].style.opacity = '0'; 

應

source["_class"][i].style.opacity = '0'; 

Answer 3

樣式應該用css而不是循環來完成，因爲使用css的速度要快一個數量級。

爲您的樣式集創建css類定義，然後簡單地更改元素的類名以更改樣式。

另外，請查看使用CSS選擇器來查詢DOM。這是通過對單個元素的querySelector或對於一組元素的querySelectorAll完成的。請注意，jQuery包裝了這個功能，這是派生名稱的地方。

對於您的具體示例，問題在於訪問數組，而不是添加i索引，您需要引用該數組，並且還需要確保使用字符串索引或點符號（例如作爲來源。_class）以引用對象的屬性

for (var i = 0; i < source['_class'].length; i++) { 
    source['_class'][i].style.opacity = '0'; 
    console.log(i); 
}