我正在尝试删除一个类并在一个函数中添加一个类。但是当我点击按钮时什么也没有发生。
这是我的代码
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>
我想要得到的是，该类被添加到第一个图像中并被第二个图像删除。
您只需要结合使用这三种方法即可.contains(), .add() and .remove()来自元素.classList https://developer.mozilla.org/en-US/docs/Web/API/Element/classList属性以及一个简单的if/else statement（或者三元运算符，如果您愿意的话），如在代码片段 below:
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两者之间的类名切换。
本文内容由网友自发贡献，版权归原作者所有，本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容，请联系:hwhale#tublm.com(使用前将#替换为@)
