为什么此对象引用不起作用？

Question

我想用对象数据中的字符串来填充这个列表。它出现为'未定义'。这是对数据对象的引用不起作用。为什么？

JS

data = [ 
     {"q":"How much?", "ac":"20%", "a1": "1%", "a2": "10%", "a3": "5%"}, 
     {"q":"What", "ac":"Ball", "a1": "Stone", "a2": "Bierd", "a3": "Carl"}, 
     {"q":"When?", "ac":"1999", "a1": "2000", "a2": "2001", "a3": "2002"} 
     ];  

var q=0 

window.onload = function() { 
    var ids =['a','b','c','d']; 
    var ans =['a1','a2','a3','ac']; 
    for (var j=0; j < ids.length; j++) { 
    var a = ans[j]; 
    document.getElementsByClassName(ids[j])[0].innerHTML = data[q].a; //[<-- PROBLEM HERE] 

}; 
} 

HTML

<ul class="answers_quiz"> 
<li class="a"></li> 
<li class="b"></li> 
<li class="c"></li> 
<li class="d"></li> 
</ul> 

Answer 1

您需要使用方括号语法，而不是点语法使用一个变量作为一个属性访问：

element.innerHTML = data[q][a]; 

d ot语法在data[q]中查找名为“a”的属性。由于没有这种东西，它会返回undefined。当您使用数组表示法时，它会查找名为a包含的任何属性。

例如，在第一次迭代时，当a === "a1",data[q].a1等于data[q][a]。