Question

我有一个页面（实际上大约有三十个左右），我正在尝试根据查询字符串变量更改特定元素的类名。一切都很好，除了这部分，我得到一个非常奇怪的结果......

        var hitAreas = document.getElementsByClassName('hitArea');
    alert(hitAreas.length);
    for(hitArea in hitAreas)
    {
        alert(hitAreas[hitArea]);
        hitAreas[hitArea].className = 'hitArea_practice';
    }

警报（hitAreas.length）; line正确地使用类名'hitArea'返回元素的数量（7，来自下面的html），但是当我遍历hitAreas时，它只更改页面上每个其他元素的类名。中途返回undefined作为alert的值（hitAreas [hitArea]）;因为它试图引用超出索引6的数组元素。

html页面正文：

        <body onload="toggleHotspotHints();">
<div>
    <img src="Dashboard1.jpg" width="1440" height="795" />
    <div class="hitArea" style="top: 55px; left: 230px; width: 72px; height: 17px;" onclick="gotoPage('BatchReconcile/1-ClaimsReconcileMenu');"></div>
    <div class="hitArea" style="top: 55px; left: 319px; width: 72px; height: 17px;" onclick="gotoPage('Eligibility/PP Elig 1');"></div>
    <div class="hitArea" style="top: 55px; left: 409px; width: 72px; height: 17px;" onclick="gotoPage('REPORTS/5-Dashboard Reports List');"></div>
    <div class="hitArea" style="top: 137px; left: 260px; width: 145px; height: 21px;" onclick="gotoPage('Dash2_Messages');"></div>
    <div class="hitArea" style="top: 223px; left: 247px; width: 126px; height: 19px;" onclick="gotoPage('ClaimsList_Failed');"></div>
    <div class="hitArea" style="top: 242px; left: 247px; width: 126px; height: 14px;" onclick="gotoPage('PayerReportList');"></div>
    <div class="hitArea" style="top: 258px; left: 247px; width: 126px; height: 14px;" onclick="gotoPage('ADM/1_trending graph');"></div>
</div>

现场演示： http://jsfiddle.net/simevidas/LE6UN/

Answer 1

Šime Vidas指出getElementsByClassName返回live nodeList，这意味着存储的集合会随着内容的更改而更新（此处为class属性）。

var hitAreas = document.getElementsByClassName('hitArea'),
    hitAreasLength = hitAreas.length;

while ( hitAreasLength-- > 0) {
    hitAreas[hitAreasLength].className = 'hitArea_practice';
}

我不确定这是否是最好的代码，但它有效：）

jsFiddle

Javascript for ... in似乎只返回数组中的每个其他索引

1 个答案: