时间戳

首页 > 解决方案 > 简单的 Javascript 删除类

javascript - 简单的 Javascript 删除类

问题描述

我正在尝试使用 Javascript 删除 mouseenter 上的一个类。人们可以解释导致它不起作用的原因吗？我是 JS 新手。该函数与警报一起使用，因此我知道该函数正在运行，因此它必须是导致问题的删除类行。

<!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>

标签： javascripthtml

解决方案

你的选择器container是错误的。您.在选择器之前缺少 a：

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

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

删除类的行也是错误的，.这里不需要：

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

推荐阅读