如何更改JavaScript中没有类/ ID的图像的src

Question

我想通过使用Ajax从JavaScript更改img的源代码。 img标签没有任何ID或类，我不知道如何选择img以及如何更改src。我怎样才能做到这一点？我把我的HTML的一部分（它提供了，所以我不能修改）和我的JavaScript的一部分。谢谢。

HTML：

<div class="moves"> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
      <button> 
      <span class="move">Move Name Here</span> <span class="dp"></span> 
      <img src="icons/fighting.jpg" alt="Pokemon move" /> 
      </button> 
</div> 

的Javascript：

 var moveArr = data.moves; 
     var moves = document.getElementsByClassName("move"); 
     for(var x=0; x < data.moves.length; x++){ 
      moves[x].innerHTML = moveArr[x].name; 
      img[x].src = "icons\/" + moveArr[x].type + ".jpg"; // I cannot write this part correctly. 
     } 

Answer 1

呀，你没有，你是试图改变的src图像的参考。我会这样做：

var moveArr = data.moves; 
var moves = document.getElementsByClassName("move"); 
for(var x=0; x < data.moves.length; x++){ 
    moves[x].innerHTML = moveArr[x].name; 
    var img = moves[x].parentNode.getElementsByTagName('img')[0]; 
    img.src = "icons\/" + moveArr[x].type + ".jpg"; 
} 

如果您的页面布局发生变化，您可能需要更改此代码。尽管现在应该为你现在拥有的东西工作。

Answer 2

如果每个span由img成功（因为它似乎是从您发布的代码），所以有相同数量的.move项目和图像 - 和他们匹配 - 那么你可以使用DOM images collection以如下方式定位每张图片的src：

var moveArr = data.moves; 
    var moves = document.getElementsByClassName("move"); 
    for(var x = 0; x < data.moves.length; x++){ 
     moves[x].innerHTML = moveArr[x].name; 
     document.images[x].src = "icons\/" + moveArr[x].type + ".jpg"; 
    }