Bir dizinin üzerinde dolaşıyorum ve dizinin içeriğini değiştiriyorum, ancak beklediğim sonuçları alamıyorum.

Question

Dizinin üstünden geçiyorum ve dizinin içeriğini değiştiriyorum, ancak beklediğim sonuçları alamıyorum. Neyi eksik veya yanlış yapıyorum?

Her birinde üç öğeyle iki grup div (sınıf saldırganı ve diğer düşman) var. Her kenardan bir kenarlık oluşturarak bir eleman seçmeye çalışıyorum. Şimdi bir saldırgandan düşmana ve başka bir şekilde sınıfları değiştirmek istiyorum. Ancak, döngü için kullandığımda, bir şekilde bazı öğeleri yok sayar ve yalnızca bir veya iki div sınıfını değiştirir.

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> 

Ve javascript kodu: İşte benim kodudur

Eğer eleman demektir elemanı almak için kullanılan sınıfı, kaldırıyorsanız da ondan

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

Canlı NodeList 'dan (artık sorguyla eşleşmediğinden) otomatik olarak kaldırılacak.

Bu olduğunda, NodeList yeniden endekslenir, böylece bir sonraki öğe geçerli olana dönüşür ve bir sonraki i++;

Düzeltmek için, tersine yineleyin.

Tersine gitmek istemiyorsanız, bir öğeyi listeden her kaldırdığınızda dizini azaltın.