Question

我希望能够点击图片，让它变大，然后当我再次点击它时，让它变回小。我试图使用if / else语句来解决这个问题，但我还是无法解决这个问题。这是我到目前为止的JS：

document.addEventListener("DOMContentLoaded", function(event) {
 var thumbnailElement = document.getElementById("smart_thumbnail");

 if (thumbnailElement.className === "small") {
    thumbnailElement.addEventListener("click", function() {
     thumbnailElement.className = "";
    });
 } else {
    thumbnailElement.addEventListener("click", function() {
     thumbnailElement.className = "small";
    });
 }
});

图片的HTML：

<img class="small" id="smart_thumbnail" src="http://4.bp.blogspot.com/-QFiV4z\
3gloQ/ULd1wyJb1oI/AAAAAAAAEIg/LE1Kakhve9Y/s1600/Hieroglyphs_Ani-papyrus.jpg">

我只是想摆脱＆＃34;小＆＃34;关于id＆＃34; smart_thumbnail＆＃34;的课程把它做大，然后放小＆＃34;小＃34;上课让它再次变小，但我只能把它做大。当我第二次点击它时，它什么也没做。我尝试过if / else if语句但是没有用。我在这里查看了同样的问题，但只能找到关于jQuery的东西。尝试仅使用JavaScript解决此问题。

任何帮助非常感谢。谢谢！

Answer 1

DOMContentLoaded事件仅触发一次，即加载页面时。而是基于每次点击运行if语句。

例如

thumbnailElement.addEventListener("click", function() {
  if (thumbnailElement.className === "small") {
      thumbnailElement.className = "";
  } else {
     thumbnailElement.className = "small";
  }
});

现在您将注册click事件一次，但每次单击它都会检查classname逻辑并适当地应用类名。

Answer 2

问题是上面的代码只会运行一次：加载您的网站后。因此，只有一个条件已满（thumbnailElement.className === "small"）

你想要的是：

var thumbnailElement = document.getElementById("smart_thumbnail");

thumbnailElement.addEventListener("click", function() {
  if (this.className === "small")
    this.className = "";
  else
    this.className = "small";
});

点击图片时会检查班级。

或者，您也可以使用classList.toggle

单击以放大图像，然后再次单击以使其返回到先前的大小

2 个答案: