如何在JavaScript中爲for循環中的特定img元素添加類

此代碼沒有任何錯誤。而且，我想爲for循環中的所有img元素添加一個類「sprite」。另外，如果eachName [1]是a.png或b.png，我想向它們添加一個「found」類，否則我想添加一個「unfound」類。我如何編寫代碼來實現它們？謝謝。如何在JavaScript中爲for循環中的特定img元素添加類

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(); 
}

來源

2017-05-07 Tak

... 
    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; 
     } 
    } 
...

來源

2017-05-07 07:29:18 styopdev

太謝謝你了。我可以給他們全部添加一個類「精靈」。但一個「未完成」的課程運作不佳。這是我想要做的。但我工作不好。 - > if（eachName [1] ==「a.png」）{ imgClass + ='found'; } else { imgClass + ='unfound'; } – Tak

記錄每個名稱[1]以確保其格式符合要求。可能是它不是你想要的文件名（例如'/a.png'或'images/a.png'） – styopdev

我無法解決...我會再提出一個關於此代碼的問題.. – Tak

如果代碼其餘部分的工作，增加以下線將解決您的問題。

用法

... 
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); 
...

Array#some

Ternary operator

來源

2017-05-07 07:47:20 marmeladze

如何在JavaScript中爲for循環中的特定img元素添加類

回答

相關問題