使用 JS 将 onclick 和 return 的高度更改为正常

Question

我是新来的。

我试图在单击图片时更改图片的高度，然后当我再次单击它们时，它们 return 变为原始高度。我试图通过使用相同的 CSS class、for 循环和 if/else.

来做到这一点

我的头像html几次都是这样：

var element = document.getElementsByClassName("imgclasstosize");

for(var i = 0; i < element.length; i++) {
    var element = element[i];
    element.onclick = function() {

        if (element.style.height == "500px") {
            element.style.height = "200px";
        } else {
            element.style.height = "500px";
        }
    }
}

<img class="imgclasstosize" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

<img class="imgclasstosize" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

我只能为第一张图片做我想要的行为。所有其他人都不这样做。你能帮我知道我做错了什么吗？

提前致谢

Answer 1

您访问元素的方式有误。使用内置的 event，像这样：

var element = document.getElementsByClassName("imgclasstosize");

for(var i = 0; i < element.length; i++) {
    var element = element[i];
    element.onclick = function(event) {

        if (event.target.style.height == "500px") {
            event.target.style.height = "200px";
        } else {
            event.target.style.height = "500px";
        }
    }
}

Answer 2

您可以 select 所有元素使用 querySelector，您也可以保留 getElementsByClassName()。然后遍历每个图像并添加事件侦听器：

var element = document.querySelectorAll('.imgclasstosize');

element.forEach(el => {
  el.addEventListener('click', function(event) {
    if (event.target.style.height == '500px') {
      event.target.style.height = '200px';
    } else {
      event.target.style.height = '500px';
    }
  });
});

<img class="imgclasstosize" src="https://assets.picspree.com/variants/FRgeQ4d3pFXszVF7QW9VBgFQ/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

<img class="imgclasstosize" src="https://assets.picspree.com/variants/RXCuAnyzqoapjkZQuhDFwBMs/f4a36f6589a0e50e702740b15352bc00e4bfaf6f58bd4db850e167794d05993d">

使用 JS 将 onclick 和 return 的高度更改为正常

Change height onclick and return to normal with JS

javascript

for-loop

if-statement

onclick

addeventlistener