javascript图片放大和缩小

Question

我尝试创建一个javascript类来放大和缩小一些图片。但页面的所有图片都会放大和缩小。我认为这是一个javascript循环的问题，但我做不到。这是我的课，有人看到问题了吗？

类图像{

constructor() {
    this.ip = document.getElementsByClassName("image_petite");
    this.images = [];
}

agrandir() {
   
    for (let i=0; i < this.ip.length; i++) {
        this.images.push(this.ip[i]);
        };

    console.log(this.images);

for (let j=0; j < this.images.length; j++) {
    if (this.images[j].classList == "image_petite") { 
    
        this.images[j].classList.remove('image_petite');
        this.images[j].classList.add('image_grande');
        
        
        } else if (this.images[j].classList == "image_grande") {
        this.images[j].classList.remove('image_grande');
        this.images[j].classList.add('image_petite');
        }
        }            
}

}

let image = new Image();

Answer 1

this.images[j].classList == "image_petite"不是用来检查元素是否有类的方法。相反，您可以使用contains

if (this.images[j].classList.contains("image_petite")) {
    // ...
}

但是，您已经单独使用了一个循环，它有意地处理this.images数组中的所有内容。如果不知道DOM结构(不严格地说是超文本标记语言)是什么样子，就很难说应该做什么，但是如果您正在尝试调整one图像的大小，您将需要确定要调整大小的图像，而该代码中的任何内容都无法做到这一点。

下面是一个使用click处理程序的简单示例：

​

// This example uses event delegation
document.body.addEventListener("click", event => {
    const image = event.target.closest("img");
    if (image && event.currentTarget.contains(image)) {
        // This is the image to enlarge or toggle
        if (image.classList.contains("image_grand")) {
            // Toggling it from big back to small
            image.classList.remove("image_grand");
            image.classList.add("image_petite");
        } else {
            // Making this the one big one
            const big = document.querySelector(".image_grand");
            if (big) {
                // Make the current big one small again
                big.classList.remove("image_grand");
                big.classList.add("image_petite");
            }
            // Make this one big
            image.classList.add("image_grand");
            image.classList.remove("image_petite");
        }
    }
});

.image_petite {
    width: 75px;
    height: 75px;
}
.image_grand {
    width: 150px;
    height: 150px;
}

<div>
    <img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=1">
</div>
<div>
    <img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=2">
</div>
<div>
    <img class="image_petite" src="https://via.placeholder.com/150/0000FF/808080 ?text=3">
</div>

​

也就是说，我认为我将只使用一个类并添加/删除该类，而不是两个类。