如何从 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";
    }