如何将没有 class/ID 的图像的 src 从 JavaScript 更改

Question

我想使用 Ajax 将 img 的来源从 JavaScript 更改。 img 标签没有任何 ID 或类，我不知道如何 select 和 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

是的，您没有对要更改其源代码的图像的引用。我会这样做：

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

如何将没有 class/ID 的图像的 src 从 JavaScript 更改

How to change the src of images which has no class/ID from JavaScript

html

javascript

ajax

src