5

配列をループして配列の内容を変更していますが、期待した結果が得られません。私は何が欠けているか、間違っていますか?

それぞれ 3 つの要素を持つ div の 2 つのグループ (1 つはクラスの攻撃者、もう 1 つは敵) があります。周囲に境界線を作成して、両側から 1 つの要素を選択しようとしています。今、クラスを攻撃者から敵に、またはその逆に切り替えたいと思います。しかし、for ループを使用すると、何らかの要素が無視され、1 つまたは 2 つの div クラスのみが変更されます。これが私のコードです：

HTML:

<div id="army1">
    <div class="attacker">
        <img src="img/Man/Archer.jpg" />
        <div class="hp"></div>
    </div>
    <br><div class="attacker">
        <img src="img/Man/Knight.jpg" />
        <div class="hp"></div>
    </div>
    <br><div class="attacker">
        <img src="img/Man/Soldier.jpg" />
        <div class="hp"></div>
    </div>
    <br>            
</div>

<div id="army2">
    <div class="enemy">
        <img src="img/Orcs/Crossbowman.jpg" />
        <div class="hp"></div>
    </div>
    <br><div class="enemy">
        <img src="img/Orcs/Mine.jpg" />
        <div class="hp"></div>
    </div>
    <br><div class="enemy">
        <img src="img/Orcs/Pikeman.jpg" />
        <div class="hp"></div>
    </div>
    <br>            
</div>

そして私のJavaScriptコード：

var attacker = document.getElementsByClassName('attacker');
var enemy = document.getElementsByClassName('enemy');


var button = document.getElementById("fight");

// var class1 = document.getElementsByClassName("first")[0].getAttribute("class");
// class1 = class1.split(" ");

//choose attacker
for (var i = 0; i < attacker.length; i++) {
    attacker[i].onclick = function () {
        //select only one attacker and set its id to attackerid
        if (this.getAttribute('class') != 'attacker first') {
            resetAttackerClasses();
            this.setAttribute('class', 'attacker first');
        } else {
            resetAttackerClasses();
        }

    };
}

//choose enemy
for (var i = 0; i < enemy.length; i++) {
    enemy[i].onclick = function () {
        //select only one attacker and set its id to enemyid
        if (this.getAttribute('class') != 'enemy second') {
            resetEnemyClasses();
            this.setAttribute('class', 'enemy second');
        } else {
            resetEnemyClasses();
        }
    };
}

//fight
button.onclick = function() {
    //take off enemy health
    document.getElementsByClassName('enemy second')[0].children[1].style.width = '50px';

    resetAttackerClasses();
    resetEnemyClasses();

     for (var i = 0; i < attacker.length; i++) {
            attacker[i].setAttribute('class', 'enemy');
            enemy[i].setAttribute('class', 'attacker');
    };
};


function resetAttackerClasses() {
    for (var i = 0; i < attacker.length; i++) {
        attacker[i].setAttribute('class', 'attacker');
    };
}
function resetEnemyClasses() {
    for (var i = 0; i < attacker.length; i++) {
        enemy[i].setAttribute('class', 'enemy');
    };
}
4

1 に答える 1

8

これは、要素をフェッチするために使用されたクラスを削除しているためです。つまり、要素はライブ NodeList から自動的に削除されます(クエリと一致しなくなったため)。

これが発生すると、NodeList のインデックスが再作成されるため、次の要素が現在の要素になり、次の要素でそれをスキップすることになりi++ます。

それを修正するには、代わりに逆に繰り返します。

逆に行きたくない場合は、リストから要素を削除するたびにインデックスを減らします。

于 2013-03-04T18:10:51.813 に答える