css 是否可以在多个元素中更改同一图像？

hvvq6cgz 于 2022-12-30 发布在其他

关注(0)|答案(3)|浏览(116)

我需要改变一个图像，我有多个元素，只需点击其中一个图像。
我是一个编码新手，我正在尝试编写一个代码，在这个代码中，选择/单击一个图像会改变屏幕上具有相同名称/id/class的每个图像（我不确定哪个效果最好或根本不确定）。
超文本：

<button onclick="changeImage()"><img src="images/bicycle.jpg" class="bicycle" id="bicycle"></button>
<button onclick="changeImage()"><img src="images/bicycle.jpg" class="bicycle" id="bicycle"></button>
<button onclick="changeImage()"><img src="images/bicycle.jpg" class="bicycle" id="bicycle"></button>

联森：

function changeImage(){
    var img = document.getElementById('bicycle');
    img.src = 'images/car.jpg'
}

每个按钮里面都有相同的图像，当我点击一个按钮时，我希望每个按钮中的其他图像也会发生变化。我意识到当我点击任何一个按钮时，只有第一个按钮中的图像会发生变化。我在某处读到过这种情况很正常，因为它会在找到该id的第一个示例时停止。

css

来源：https://stackoverflow.com/questions/74946066/is-it-possible-to-change-the-same-image-in-multiple-elements

3条答案

按热度按时间

erhoui1w1#

你不能用那种方法，因为id必须是唯一的，所以document.getElementById总是只得到第一个引用。
您应该使用className查找元素：

var elements = document.getElementsByClassName("bicycle");
for(var i = 0; i < elements.length; i++) {
    elements[i].src = 'images/car.jpg'
}

如果成功了告诉我。

赞(0）回复(0）举报 2022-12-30

nwlls2ji2#

ID应该是唯一的，并且在page. document中使用的ID不得超过一个。getElementById（'bicycle '）返回代码中的第一个匹配项，并且您可以更改第一个图像。
使用替代方法来获取元素，如（document. querySelectorAll（），document. getElementsByClassName（））。这些方法以数组的形式返回所有匹配的元素。因此，您可以循环数组来更改元素的属性。

function changeImage(e) {
  let current_image_src = e.target.currentSrc;
  document.querySelectorAll('.bicycle').forEach((element => {
  element.src = current_image_src;
}))
}

img {
  width: 150px;
  cursor: pointer;
}

<img 
  onClick="changeImage(event)"
  class="bicycle"
  src="https://media.gettyimages.com/id/477445662/photo/professional-road-cyclist.jpg?s=612x612&w=gi&k=20&c=Mx-v3lSwNYMqQKfUhr_w22WUdXK3aDZqxhsHZEafok0="
     />
<img 
  onClick="changeImage(event)" 
  class="bicycle"
  src="https://agavept.com/wp-content/uploads/2017/10/iStock-614649230-1024x645.jpg"
    >
<img 
  onClick="changeImage(event)"
  class="bicycle"
  src="http://lemonbin.com/wp-content/uploads/2020/06/cyclist-june172020-min.jpg"
    />

赞(0）回复(0）举报 2022-12-30

plupiseo3#

所以正如第一个评论所说，你不能通过ID来实现，因为ID必须是唯一的，所以把它变成一个类。
超文本：

const image = document.querySelectorAll(".element");

image.forEach((item) => {
    item.addEventListener("click", function (){
        for (let i = 0; i < image.length; i++) {
            image[i].src = "https://picsum.photos/200";
        }
    });
});

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
</head>
<body>
    <img src="https://www.cdc.gov/healthypets/images/pets/cute-dog-headshot.jpg?_=42445" alt="Random Picture" class="element"/>
    <img src="https://www.cdc.gov/healthypets/images/pets/cute-dog-headshot.jpg?_=42445" alt="Random Picture" class="element"/>
    <img src="https://www.cdc.gov/healthypets/images/pets/cute-dog-headshot.jpg?_=42445" alt="Random Picture" class="element"/>

    <script src="index.js" text="text/javascript"></script>
</body>
</html>

实际上，它所做的是声明一个const，它是我的元素与class元素（即我的3个元素）的NodeList（实际上是一个Array）。
从这里image.forEach((item) => {遍历我的NodeList（数组），并为每一个项目（即每一张图片）添加一个"click"事件监听器，当点击发生时，调用一个匿名函数，这个匿名函数是一个for循环，遍历每一张图片并将其"src"属性更改为那个picsum链接（picsum是一个生成随机图片的网站）。
在几分钟内完成了这个，所以它只工作一次，但这应该希望让你走上正确的道路：）
快乐编码!

赞(0）回复(0）举报 2022-12-30

我来回答

css 是否可以在多个元素中更改同一图像？

3条答案

相关问题

热门标签

最新问答