我无法添加或删除一个类

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>

我想要实现的是，将该类添加到第一张图片，并由第二张图片删除。

- Ogechi Chibueze

---

我几乎可以确定<form>会触发submit事件，而不是<button>。 - zero298

将事件监听器更改为点击并从按钮中删除该类型属性。 - Mladen Skrbic

你不应该为“喜欢”和“取消喜欢”创建两个函数，而是应该在一个函数中切换类，并在其中添加if条件语句，因为现在你的代码需要两个按钮，我不知道你是否想要这样。 - Mladen Skrbic

Answer 1

你只需要使用.contains()，.add() 和 .remove() 这三种方法，结合简单的 if/else语句 （或者三元操作符，如果你更喜欢这个），即可完成。这些方法都是从element.classList 属性中获取的。以下是一个 代码片段 的示例：

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"类名的元素的绿色背景样式在两者之间切换。

- AndrewL64

Answer 2

这将按您的期望工作：

function unlikeVerhaal(e) {
    e.preventDefault;
    document.getElementById('unliked').classList.add('onzichtbaar');
    document.getElementById('liked').classList.remove('onzichtbaar'); 
} 

document.getElementById('likebutton').addEventListener('click', unlikeVerhaal);

只需将 submit 更改为 click 并从按钮中删除 type

Fiddle

更新：

已更新的 Fiddle

- 20yco

---

你能否使用堆栈片段替代外部的fiddle？ - Barmar

@OgechiChibueze 但是 Fiddle 可以工作，看一下控制台。 - 20yco

@barmar，有什么问题吗？不应该因为这个原因就给我的回答投反对票。我使用我喜欢的工具，有时候 stack snippet 会让我感到困惑。 - 20yco

我只是评论了，没有点踩。除非回答是错误的，否则我从不点踩。Stack Snippet与jsfiddle非常相似，有什么让人困惑的呢？ - Barmar

我同意，那很烦人。但是一旦你创建了 fiddle，你可以轻松地从中复制/粘贴到代码片段中。 - Barmar