无法使用Javascript从div中删除类

  • Z时代
  • 2024-01-10
  • 分类：问答

我正尝试在div上创建一个类，然后将其删除。首先，我认为就像我之前用toggleClass那样做，但似乎并不奏效，因为我正在向ID添加一个类，而不是类。我希望我的标题也有类黑色背景：headerbg。无法使用Javascript从div中删除类

另外我有一个关于我的汉堡菜单的颜色的小问题。在汉堡包菜单上按下时，我想要在课堂上切换白线的颜色（橙色而不是白色）。

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年后又回来了。

感谢您查看这个问题！

回答：

你的DOM元素的理解似乎是模糊的。让我们分解它。

我想在div上创建一个类，然后删除它。

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

...，因为我正在向一个ID而不是一个Class添加一个类。

这在技术上不可行。你不能将一个类添加到一个id中，也不能将一个id添加到一个类中。您只能添加/删除/修改DOM元素的id属性，并且您可以向DOM元素的className属性添加/删除类，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评论：

首先，我要添加的类.headerbg<header>当我点击.hamburger类，然后当我再次点击.hamburger类时，我想删除/删除类.headerbg为<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(){...})的快捷方式。我个人建议将后者用于所有事件绑定函数以开发一致的绑定模式。从长远来看，它可以帮助维护代码。此外，它允许通过使用可选的子选择器参数绑定尚未在DOM中的元素。例如，如果你想要做绑定之前.hamburger在DOM被创造了，你可以有，语法如下：

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

的主要区别是第一语法结合对每一个事件监听器它发现在绑定完成时（document.ready您的情况）.hamburger的实例。
第二种语法只绑定一个事件，在window对象上，并在click时评估它是否是从具有.hamburger类的元素中触发的。这意味着如果你有1k个元素与类.hamburger，你不绑定每个事件（导致1k听众）的事件。此外，它具有很大的优势，它会在被后绑定添加到页面元素的工作已经完成（因为评价是在click事件完成，而不是在ready事件。

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

之间选择。

  • .click(function(){...})

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

我总是去第二次，因为它是在所有的事件监听器是一致的（这并不重要，我把作为第一个参数，而不是click - 也，它允许多个事件绑定上立即键入：.on('click tap swipe', function(){...})）

2。

之间

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

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

回答：

在#header你应该切换headerbg不只是将它添加：

那么你的jQuery必须是：

$(document).ready(function(){ 
$(".hamburger").click(function(){ 
    $(".hamburger").toggleClass("closed"); 
    $(".menu").toggleClass("show"); 
    if($("#header").hasClass("headerbg")){ 
     $("#header").removeClass("headerbg"); 
    } 
    else 
    { 
     $("#header").addClass("headerbg"); 
    } 
}); 
});

回答：

如果您需要添加样式ID您应该通过attr函数传递样式。这样

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

，你可以删除它像这样

$("header").attr('id','');

这种方式，您可以切换它

以上是 无法使用Javascript从div中删除类 的全部内容， 来源链接： utcz.com/qa/258793.html

回到顶部