javascript - 我正在遍历一个数组并修改该数组的内容，但没有得到预期的结果。

我正在遍历一个数组并修改该数组的内容，但没有得到预期的结果。我想念什么或做错什么？

我有两组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');
    };
}

最佳答案

这是因为您要删除用于获取元素的类，这意味着该元素将自动从 Activity 的NodeList中删除(因为它不再与查询匹配)。

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

要解决此问题，请反向进行迭代。

如果您不希望反向操作，那么每次从列表中删除元素时，都将递减索引。