javascript - 我的函数使用关联数组(dom 对象)和 for 循环时出现问题

Question

知识:第一周 Javascript

我正在尝试学习真正的 javascript 并不惜一切代价避免使用 jquery。现在我最近了解到 id 可以很容易地设置样式，但不能设置类。为了设计一个类的样式，我需要循环遍历该类的 dom。我的原始代码有效，但我的新代码无效。暂时先把最佳实践放在一边，我正在尝试了解它是如何工作的，无论它是否是一个完美的解决方案。

问题细节:在我的新代码中，我将两个 get 函数存储在关联数组中的键中。所以我有一些我希望 for 循环能够理解的对象。我正在努力让它像我的第一个代码一样工作。

我尝试过的:老实说，我读过一些有关方括号表示法及其用途的内容。老实说，我感到有点不知所措。我尝试的是:

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] 代替 来源[_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]。

因此，您同时拥有一个带有属性的对象和一个带有元素的数组。您需要适本地访问它们的内容。