So fügen Sie eine Klasse zu bestimmten Img-Elementen in for-Schleife in JavaScript hinzu

Question

Jetzt hat dieser Code keine Fehler. Und ich möchte allen img-Elementen in der for-Schleife eine Klasse "sprite" hinzufügen. Wenn eachName [1] a.png oder b.png ist, möchte ich außerdem eine Klasse "found" hinzufügen, und ansonsten möchte ich eine Klasse "nicht gefunden" hinzufügen. Wie kann ich einen Code schreiben, um sie zu erreichen? Vielen Dank.

function populatePokedex() { 

    var xhr = new XMLHttpRequest(); 
    xhr.open("GET", "data.txt"); 
    xhr.onload = function(){ 
     if (this.status == 200) { 

      var picArr = this.responseText.split("\n"); 
      for(var i=0; i < picArr.length; i++){ 
       var eachName = picArr[i].split(":") 
       var spriteurl = "/Pokedex/sprites/" + eachName[1]; 
       document.getElementById("pokedex-view").innerHTML += "<img src=" + spriteurl + ">"; 
      } 

     } else { 
      document.getElementById("pokedex-view").innerHTML = "ERROR: Status: " + this.status + ", " + this.statusText; 
     } 
    } 
    xhr.onerror = function(){ 
     document.getElementById("pokedex-view").innerHTML = "ERROR"; 
    } 
    xhr.send(); 
} 

Answer 1

... 
    xhr.onload = function(){ 
     if (this.status == 200) { 

      var picArr = this.responseText.split("\n"); 
      for(var i=0; i < picArr.length; i++){ 
       var eachName = picArr[i].split(":") 
       var spriteurl = "/Pokedex/sprites/" + eachName[1]; 
       var imgClass = 'sprite'; 
       if (eachName[1] === 'a.png' || eachName[1] === 'b.png') { 
        imgClass += ' found'; 
       } else { 
        imgClass += ' unfound '; 
       } 
       document.getElementById("pokedex-view").innerHTML += '<img src="' + spriteurl + '" class="' + imgClass + '">'; 
      } 

     } else { 
      document.getElementById("pokedex-view").innerHTML = "ERROR: Status: " + this.status + ", " + this.statusText; 
     } 
    } 
... 

Answer 2

wenn Rest Code arbeitet, wird das Hinzufügen unten Linien Ihr Problem lösen.

... 
var spriteurl = "/Pokedex/sprites/" + eachName[1]; 
img = document.createElement("img"); 
img.setAttribute("src", spriteurl); 
klass = ["a.png", "b.png"].some(function(e) { return e == eachName[1]; } ? "found" : "unfound"; 
img.setAtrribute("class", klass) // or classList += 
document.getElementById("pokedex-view").appendChild(img); 
... 

Verwendung von Array#some

Ternary operator