单击更改高度并使用JS恢复正常

Question

我是新来的。

当我点击图片时，我试图更改它们的高度，然后当我再次点击它们时，它们会返回到原始高度。我试图通过使用相同的CSS类、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

您可以使用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">

Answer 2

您访问元素的方式不对。使用内置的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";
}
}
}