배열을 반복하고 배열의 내용을 수정하지만 예상 한 결과를 얻지 못합니다.

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> 

그리고 내 자바 스크립트 코드 : 여기 내 코드입니다

당신이 요소를 의미 요소를 가져 오는 데 사용 된 클래스를 제거하고 그것 때문에

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가 다시 색인화되어 다음 요소가 현재 색인이되고 다음에 i++으로 건너 뜁니다.

수정하려면 대신 반대로하십시오.

역순으로 이동하지 않으려면 목록에서 요소를 제거 할 때마다 색인을 감소 시키십시오.