javascript - 我无法添加或删除类(class)

Question

我正在尝试删除一个类并在一个函数中添加一个类。但是当我点击按钮时什么也没有发生。

这是我的代码

function unlikeVerhaal(unlike) {
  unlike.preventDefault;
  document.querySelector('#unliked').classList.add('onzichtbaar');
  document.querySelector('#liked').classList.remove('onzichtbaar');
}

document.querySelector('.likebutton').addEventListener('submit', unlikeVerhaal);

.onzichtbaar {
  display: none;
}

<li>
  <button type="submit" class="likebutton">
    <img src="icons/lined.png" alt="lined heart" class="unliked" id="unliked">
    <img src="icons/solid.png" alt="solid heart" id="liked" class="onzichtbaar">
  </button> 777
</li>

我想要得到的是该类被添加到第一张图片并被第二张图片删除。

Answer 1

你只需要结合使用三种方法.contains(), .add() 和 .remove() 来自 element.classList 属性以及一个简单的 if/else 语句(如果您愿意，也可以使用三元运算符)，如下面的代码片段所示:

var btn = document.querySelector('.likebutton');

function unlikeVerhaal() {
    var ul = document.getElementById("unliked");
    var l = document.getElementById("liked");
    
    if (ul.classList.contains("onzichtbaar")) {
        ul.classList.remove("onzichtbaar");
        l.classList.add("onzichtbaar");
        console.log("Inspect your elements to see the class switching!")
    } else {
        l.classList.remove("onzichtbaar");
        ul.classList.add("onzichtbaar");
        console.log("Inspect your elements to see the class switching!")
    }
}

btn.addEventListener("click", unlikeVerhaal)

.onzichtbaar {background-color: green;}

<li>
      <button type="button" class="likebutton">
      <div class="unliked" id="unliked">A</div>
      <div id="liked" class="onzichtbaar">B</div>
      </button> 777
</li>

---

您可以检查元素以查看两者之间的类切换，或者您可以只观察应用于元素的绿色背景样式 onzichtbaar 两者之间的类名切换。