3

javascriptを使用してhtmlページのdivに境界線を追加しようとしています。onclickイベントを使用してそれを行うことができないようです。これは私のJavaScriptです：

var attacker = document.getElementsByClassName('attacker');
for (var i = 0; i < attacker.length; i++) {
attacker[i].onclick = function() {
    attacker[i].style.border = "3px solid blue";
}};

そしてここに私のhtmlがあります：

<div  class="attacker">
  <img src="img/'.$race2.'/'.$units2[$i].'.jpg" />
  <div class="hp"></div>
</div>

変更すると、attacker [0] .style.border = "3px solid blue";と入力して、境界線を追加します。javascriptに直接挿入すると機能しますが、onclickイベントを使用すると、undefinedのプロパティを設定できないと表示されます。私がどこで間違ったのか考えていますか？

4

2 に答える 2

4

これは、iが閉じられていないため、.onclick関数は常にリストiの長さ.attacker+1として使用されます。いくつかの解決策がありますが、私のお気に入りは.forEach、閉じが自動的になるようにノードリストを反復処理することです。

Array.prototype.forEach.call(document.getElementsByClassName('attacker'),
function (elem) {
    elem.addEventListener('click', function () {
        this.style.border = "3px solid blue";
    });
});
于 2013-02-28T19:16:21.093 に答える
1

ここで解決策があります：

thisの代わりに無名関数で使用しますattacker[i]。これは、その関数スコープでは使用できないためです。

于 2013-02-28T19:17:22.227 に答える