如何将事件设置为通过.classList.add添加类的选择器

Question

我想在下面得到结果，但不知道如何。

通过单击按钮将框颜色从黄色更改为红色。
单击红色框显示警报。

第一个适用于我的代码。 但是第二个不起作用。

有人可以帮我吗？

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Document</title>
    <style>
        .box {
            width: 100px;
            height: 100px;
            background-color:yellow;
        }
        .box.red {
            background-color: red;
        }
    </style>
</head>
<body>
    <a href="#" class="button">Click</a>
    <div class="box">BOX</div>

    <script>
        document.querySelector('.button').addEventListener('click', () => {
           document.querySelector('.box').classList.add('red');
        });

        document.querySelector('.box.red').addEventListener('click', () => {
            window.alert('You clicked Red Box');
        });
    </script>

</body>
</html>

Answer 1

问题是，当您那时附加第二个侦听器时，不存在class = red元素。

您应该将onclick事件更改为第一个事件中的第二个事件，在这种情况下，请勿使用addEventListener。

 let btn = document.querySelector('.button'); btn.onclick = function(){ document.querySelector('.box').classList.add('red'); document.querySelector('.red').onclick = function(){ window.alert('You clicked Red Box'); } }

 <!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <title>Document</title> <style> .box { width: 100px; height: 100px; background-color:yellow; } .box.red { background-color: red; } </style> </head> <body> <a href="#" class="button">Click</a> <div class="box">BOX</div> </body> </html>

如何将事件设置为通过.classList.add添加类的选择器

问题描述

1 个解决方案

解决方案1
0 已采纳 2019-07-04 14:58:36

如何将事件设置为通过.classList.add添加类的选择器

问题描述

1 个解决方案

解决方案1 0 已采纳 2019-07-04 14:58:36

解决方案1
0 已采纳 2019-07-04 14:58:36