Question

我正在开发自己的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">

Answer 1

您尝试在 img.popup 元素类列表上切换类名 .popup ，而不是切换类名 {{ 1}} 。

更改此：

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;}

JavaScript“ classList”切换未切换元素的类名

1 个答案: