时间戳

首页 > 解决方案 > 为什么我的函数在第二次单击时不加载新的类名？

javascript - 为什么我的函数在第二次单击时不加载新的类名？

问题描述

我有一个附有我的功能的模态：

<img onclick="modalZoom()" class="zoomed-out" id="modal-img">

我的功能如下所示：

function modalZoom() {
    var imgClass = document.getElementById("modal-img").classList;
    var pedImg = document.getElementById("modal-img");
    if (imgClass = "zoomed-out") {
        pedImg.classList.remove("zoomed-out");
        pedImg.classList.add("zoomed-in");
    } else {
        pedImg.classList.remove("zoomed-in");
        pedImg.classList.add("zoomed-out");
    }
    console.log(imgClass);
}

我也尝试添加一个else if语句而不是仅仅添加一个语句else，但我的问题是，当我第一次单击它时，它会读取该类，并且由于它是zoomed-out，它会删除它并添加zoomed-in. 但是由于某种原因，当我第二次单击它时，console.log(imgClass);仍然返回zoomed-out并且我的代码的后半部分没有运行，即使我可以在我的检查器中看到类 IS zoomed-in。函数第一次运行时是否var imgClass唯一运行，如果是，我该如何解决？我尝试删除变量并直接在if语句中获取类，但我仍然遇到同样的问题。

标签： javascript

解决方案

所以我将代码更改为if (imgClass.match("zoomed-out")). 老实说，我不知道有什么区别，但它确实有效。

推荐阅读