javascript 我尝试将同一个函数绑定到两个图像上,当我单击一个Img时，我希望只调整该图像的大小，而不是调整所有图像的大小

rqdpfwrv 于 2023-01-07 发布在 Java

关注(0)|答案(1)|浏览(99)

正如你所看到的，当我点击图片时，我试图改变图片的样式。然而，当我运行函数时，
它改变了一个图像的样式。我想重用这个函数来切换两个图像的样式。例如，如果我点击image1，我想image1变大。

let x = document.getElementById("img1");
        let myImage2 = document.getElementById("img2");
        function change(x,y) {
            x.classList.toggle("fullsize");
            y.classList.toggle("fullsize");
        }
        x.addEventListener("click", change());

.img {
            width: 200px;
            height: 200px;
        }

        .fullsize {
            background: rgba(0, 0, 0, .5);
            background-size: contain;
            z-index: 999;
            cursor: zoom-out;
            display: block;
            width: 400px;
            max-width: 400px;
            height: 550px;
            margin-left: auto;
            margin-right: auto;
        }

<body>
    <h1>Click to Open Zoom the image</h1>
    <img src="https://picsum.photos/id/287/1000/1000" class="img" id="img1">
    <img src="https://picsum.photos/id/27/1000/1000" class="img" id="img2">
</body>

令x =文档.获取元素按标识符（"图像1"）;令我的图像2 =文档.按标识获取元素（"img2"）;函数改变（x，y）{x.类列表.切换（"全尺寸"）; y.类列表.切换（"全尺寸"）; } x. addEventListener（"单击"，更改（））;

JavaScript

来源：https://stackoverflow.com/questions/75038335/i-am-trying-to-bind-the-same-function-to-two-images-when-i-click-on-an-img-i-w

1条答案

按热度按时间

j1dl9f461#

你可以这样做：

function change(event) {
  event.target.classList.toggle("fullsize");
}
document.querySelectorAll('.img').forEach((imgElm) => {
  imgElm.addEventListener('click', change);
});

.img {
  width: 200px;
  height: 200px;
}

.fullsize {
  background: rgba(0, 0, 0, .5);
  background-size: contain;
  z-index: 999;
  cursor: zoom-out;
  display: block;
  width: 400px;
  max-width: 400px;
  height: 550px;
  margin-left: auto;
  margin-right: auto;
}

<body>
  <h1>Click to Open Zoom the image</h1>
  <img src="https://picsum.photos/id/287/1000/1000" class="img" id="img1">
  <img src="https://picsum.photos/id/27/1000/1000" class="img" id="img2">
</body>

这样做的目的是获取具有类img（document.querySelectorAll('.img')）的所有元素，循环遍历所有这些元素（.forEach(..)），并使用change作为回调添加一个单击事件侦听器。
change函数使用事件（event变量）获取被单击的元素（event.target）并切换fullsize类。

赞(0）回复(0）举报 2023-01-07

我来回答

javascript 我尝试将同一个函数绑定到两个图像上,当我单击一个Img时，我希望只调整该图像的大小，而不是调整所有图像的大小

1条答案

相关问题

热门标签

最新问答