1

クエリ文字列変数に基づいて特定の要素のクラス名を変更しようとしているページ (実際には約 30 程度) があります。この部分を除いてすべて正常に動作しますが、本当に奇妙な結果が得られます...

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

アラート(hitAreas.length); 行は、クラス名「hitArea」で要素の数 (以下の html から 7) を適切に返していますが、hitAreas を反復処理すると、ページ上の他のすべての要素のクラス名のみが変更されます。途中で、alert(hitAreas[hitArea]); の値として undefined が返されます。おそらく、インデックス 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/

4

1 に答える 1

3

Šime VidasgetElementsByClassNameは、ライブ nodeListを返すことを指摘しました。これは、保存されているコレクションが変更されると更新されることを意味します (ここではclass属性)。

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

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

これが最も素晴らしいコードかどうかはわかりませんが、機能します:)

jsFiddle .

于 2011-03-03T23:28:53.280 に答える