Question

我正在尝试使用Javascript删除mouseenter上的类。人们可以解释什么导致它不起作用？我是JS的新手。该函数与Alert一起工作，所以我知道函数正在工作，所以它必须是导致问题的删除类行。

<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" type="text/css" href="styles.css" />
    <link href="https://fonts.googleapis.com/css?family=Roboto" rel="stylesheet">
    <title>Document</title>
 </head>
 <body>
    <div class="container">
       <div class="left-filter">
         <div class="left">
           <h1 class="heading1">hi</h1>
           <a href="" class="landing-btn">Shop</a>
         </div>
       </div>
    </div>

    <script>
    var left = document.querySelector('.left');
    var container = document.querySelector('container');
    left.addEventListener('mouseenter', function(){
    container.classList.remove('.left-filter');
    })
    </script>
    </body>
    </html>

Answer 1

container.classList.remove('.left-filter');应为container.classList.remove('left-filter');

您只需在remove中提及类的名称即可删除该类。不是.

此外document.querySelector('container');应为document.querySelector('.container');

旁注。如果有多个元素包含.container类，document.querySelector('.container')只会选择第一个元素。

如果要将事件附加到所有这些元素，则必须使用document.querySelectorAll('.container')，这将为您提供节点列表，并且您必须遍历此列表才能附加事件到所有节点

Answer 2

container的选择器错误。您在选择器前缺少.：

var container = document.querySelector('.container');
                                        ^
                                        |
                                        ---- This dot was missing

点表示您正在按类选择元素。没有它，javascript正在搜索名为container的元素。

删除该类的行也是错误的，此处不需要.：

container.classList.remove('left-filter');

简单的Javascript删除类

2 个答案: