javascript - 无法使用 Javascript 从 div 中删除类

Question

我正在尝试在 div 上创建一个类，然后将其删除。首先，我想就像我以前对 toggleClass 所做的那样，但这似乎不起作用，因为我将类添加到 ID 而不是 Class。我希望我的页眉顶部也有黑色背景以及类:headerbg。

还有一个关于汉堡菜单颜色的小问题。当按下汉堡菜单时，我想在类里面切换白线的颜色(橙色而不是白色)。

My live version where it is on, works only when 1024px or smaller

我的 Javascript

$(document).ready(function(){
    $(".hamburger").click(function(){
        $(".hamburger").toggleClass("closed");
        $(".menu").toggleClass("show");
        $("header").addClass('headerbg');              
    });
});

我的 CSS

   .hamburger div{
    height: 3px;
    background-color: white;
    margin: 5px 0;
    border-radius: 25px;
    transition: 0.3s;
}

.hamburger {
    width: 30px;
    display: none;
    margin: 3em 3em 3em 0;
    float: right;
    transition: all 0.75s 0.25s;
}

.one {
    width: 30px;
}

.two {
    width: 20px;
}

.three {
    width: 25px;
}

.hamburger:hover div {
    width: 30px;
}


.hamburger.closed {
    -webkit-transform: rotate(45deg); 
    -moz-transform: rotate(45deg);  
}


@media only screen and (max-width: 1024px) {
    .menu {
        width: 100%;
        background: #000;
        margin: 0;
        display: none;
    }

    .show {
        width: 100%;
        background: #000;
        margin: 0;
        display: block;
}

    .headerbg {
        background: #000;
    }

    .hamburger {
        display: block;
    }

}

如果有人可以给我一个很好的例子或者更好地帮助我，我将非常感激!在 HTML/CSS 中断 2.5 年后刚刚回来。

感谢您查看问题!

Answer 1

您对 DOM 元素的理解似乎很模糊。让我们分解一下。

I'm trying to create a class on a div and then delete it.

这里它是什么，你想删除什么？类还是元素？

..., because I'm adding a class to an ID instead of a Class.

这在技术上是不可能的。你不能给一个id加上一个class，也不能给一个class加上一个id。您只能添加/删除/修改 id DOM 元素的属性，您可以向 className 添加/删除类DOM 元素的属性，由 class 在标记中引用属性。

简而言之，使用 jQuery，您可以通过 ID、类、属性或属性值(实际上，通过与元素匹配的任何有效 CSS 选择器)选择一个或多个元素，并且您可以应用.toggleClass() , .addClass()或 .removeClass()该元素(或集合中的每个元素，如果它们不止一个)的方法(或任何其他 jQuery 方法)。

这里是您当前代码的作用:

$(document).ready(function(){ 
  /* when all the DOM has finished building... */

  $(".hamburger").click(function(){
    /* do the following when an element with class "hamburger" is clicked: */

    $(".hamburger").toggleClass("closed");        
      /* toggle class `closed` on all elements with class "hamburger" 
         (not only on clicked one!) */

    $(".menu").toggleClass("show");
      // toggle class `show` on all elements with class "menu" 

    $("header").addClass('headerbg');
      // add class "headerbg" to all <header> elements in page
  });
 });

---

根据 OP 评论添加:

First I want to add the class .headerbg on the <header> when I click on the .hamburger class, then when I click on the .hamburger class again I want to delete/remove the class .headerbg for the <header>

这样做就可以了:

/*
 * place the following inside an instance of 
 * $(document).ready(function(){...})
 */

$('.hamburger').on('click', function(){
  $('header').toggleClass('headerbg');
})

注意:

• $(selector).click(function(){...})是
  的捷径 $(selector).on('click', [child-selector,] function(){...}) .我个人建议将后者用于所有事件绑定(bind)函数以开发一致的绑定(bind)模式。从长远来看，它有助于维护代码。此外，它还允许通过使用可选的子选择器参数绑定(bind)尚未在 DOM 中的元素。例如，如果您想在 .hamburger 之前进行绑定(bind)是在 DOM 中创建的，您可以使用以下语法:

$(window).on('click', '.hamburger', function(){
  $('header').toggleClass('headerbg');
})

主要区别在于第一个语法在每个 .hamburger 实例上绑定(bind)了一个事件监听器。它在绑定(bind)完成时找到(在您的情况下为 document.ready)。
第二种语法只绑定(bind)一个事件，在 window 上对象并在 click 时刻进行评估如果它是从类 .hamburger 的元素内部触发的或不。这意味着如果你有 1k 个类为 .hamburger 的元素，您不会在每个事件上绑定(bind)一个事件(导致 1k 听众)。此外，它还有一个很大的优势，那就是它可以处理绑定(bind)完成后添加到页面的元素(因为评估是在 click 事件中完成的，而不是在 ready 事件中完成的。

为了更加精确和清晰，这里有两种语法选择。

1.选择:

• .click(function(){...})
• .on('click', function(){...})

我总是选择第二个，因为它在所有事件监听器中都是一致的(我把什么作为第一个参数而不是 click 并不重要 - 还有, 它允许一次绑定(bind)多个事件类型:.on('click tap swipe', function(){...}) )

2.选择

• $(child-selector).on('click', function(){...})
• $(parent-selector).on('click', child-selector, function(){...}) .

如果child-selector只有一个实例并且在您进行绑定(bind)时它已经在 DOM 中，请先选择。如果有多个 child-selector 实例你想要每一个都在里面 parent-selector , 使用第二个。
从理论上讲，您希望事件监听器尽可能少，因此每个 child 一个，而不是 2 个监听器，而父级只有一个监听器。
此外，最佳做法是尽可能使用最小的父选择器。例如，如果您知道所有 child-selector s 将始终包含在包含您的内容的 div 中 — 比如 $('#main') — 最好绑定(bind)到那个容器而不是 $('<body>')或 $(window) .这将使您的代码不会针对在 $('#main') 之外触发的点击事件进行评估。 ，这在理论上和实践上都能使您的页面更快、更轻便，从而获得更好的用户体验。