JavaScript“classList”切换不会切换元素的类名

Posted 2021-04-15

我正在研究我的javascript技能，但我无法解决这个问题。当点击button.terug时，我想在我的身体中显示一个图像。

我尝试使用classList.toggle()在点击时从popup元素切换类名<img>但它似乎不起作用。我究竟做错了什么？

JS：

var uno = document.querySelector('button.terug');

var popup = document.querySelector('img.popup');

uno.addEventListener ('click', function(){
    popup.classList.toggle('img.popup');
});

html：

<button class="terug"></button>
<img class="popup" src="images/popup1.png" alt="beoordeling">

答案

您正试图在img.popup元素类列表上切换类名.popup，而不是切换类名popup。

改变这个：

uno.addEventListener ('click', function(){
    popup.classList.toggle('img.popup');
});

对此：

uno.addEventListener ('click', function(){
    popup.classList.toggle('popup'); // you don't need to add the dot since classList knows that the argument is a reference to a class-name.
});

---

检查并运行下面的代码片段，以获取上述代码的实际示例：

/* JavaScript */

var uno = document.querySelector(".terug");
var popup = document.querySelector(".popup");

uno.addEventListener ('click', function(){
    popup.classList.toggle('popup'); // you don't need to add the dot since classList knows that the argument is a reference to a class-name.
});

/* CSS */

img {opacity: 0;}
img.popup {opacity: 1;}

<!-- HTML -->

<button class="terug">Click Me</button>
<img class="popup" src="images/popup1.png" alt="beoordeling">

以上是关于JavaScript“classList”切换不会切换元素的类名的主要内容，如果未能解决你的问题，请参考以下文章

classList.remove 和 .add 由于某种原因无法正常工作

使用classList和dataset实现tab切换

针对多个类之一/仅部分类字符串 - className vs classList

Antenna House 6.6 是不是支持 HTML DOM classList 切换？

用javascript的classList代替jquery的class操作

javascript：将classList替换为条件