Question

这听起来可能是一个愚蠢的问题。我在页面中有一组图像。而这些图像没有ID，只有一个类。我希望通过类名获取这些元素，并用不同的内容替换它们。我应该怎么做。

Answer 1

以下使用vanilla JavaScript（没有jQuery）并执行：

选择页面中已分配类的图像（在此示例中为imageClass）。 document.querySelectorAll()允许您使用CSS3选择器选择DOM元素。
更改每个图像的“内容”（src链接），因此您可以显示不同的图像。

单击示例中的按钮可更改图像的“内容”。

(function() {
  var changeContent = function() {
    document.querySelectorAll('.imageClass').forEach(function(image) {
      image.src = 'https://placeimg.com/340/280/people'
    });

  };
  document.getElementById('btn').addEventListener('click', changeContent);
})();

<button id="btn" type="button">Change Images</button>
<img class="imageClass" src="https://placeimg.com/240/180/animals">
<img class="imageClass" src="https://placeimg.com/240/180/animals">
<img class="imageClass" src="https://placeimg.com/240/180/animals">
<img class="imageClass" src="https://placeimg.com/240/180/animals">

从元素列表中替换html元素

1 个答案: