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

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

2 个答案: