我循环一个数组并修改数组的内容,但我没有得到我期望的结果.

Question

我循环一个数组并修改数组的内容,但我没有得到我期望的结果.我错过了什么或做错了什么？

我有两组div(一组有攻击者,另一组有敌人),每组有三个元素.我试图通过在它周围做一个边框从每一侧选择一个元素.现在我想将攻击者的类别转换为敌人,反之亦然.但是当我使用for循环时,它会以某种方式忽略某些元素并仅更改一个或两个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');
    };
}

Answer 1

这是因为您正在删除用于获取元素的类,这意味着该元素将自动从实时NodeList中删除(因为它不再与查询匹配).

当发生这种情况时,NodeList被重新编制索引,因此下一个元素将成为当前元素,最后您将使用下一个元素跳过它i++;

要修复它,请反向迭代.

如果您不想反向进行,则每次从列表中删除元素时都会减少索引.