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

发布于 2024-10-20 18:05:04 字数 1891 浏览 1 评论 0原文

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

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

alert(hitAreas.length);行正确返回类名“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/

原文

I have a page (actually, about thirty or so) where I'm trying to change the classname of specific elements based on a querystring variable. Everything works fine except for this part, I'm getting a really weird result...

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

The alert(hitAreas.length); line is properly returning the number of elements (7, from the html below) with the classname 'hitArea', but when I iterate through hitAreas, it's only changing the classnames for every other element on the page. Halfway through it returns undefined as a value for alert(hitAreas[hitArea]); assumably because it's trying to reference array elements beyond an index of 6.

Body of the html page:

        <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>

Live demo: http://jsfiddle.net/simevidas/LE6UN/

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

不甘平庸 2024-10-27 18:05:04

Šime Vidas 指出 getElementsByClassName 返回一个 live nodeList，这意味着存储的集合将随着事物的变化而更新（这里的 class属性）。

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

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

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

jsFiddle。

Šime Vidas pointed out that getElementsByClassName retuns a live nodeList, meaning the collection stored will be updated as things are changed (here the class attribute).

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

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

I'm not sure if this is the nicest code, but it works :)

jsFiddle.

回复收藏 0 原文

~没有更多了~