無法使用Javascript從div中刪除類

我正嘗試在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年後又回來了。

感謝您查看這個問題！

來源

2017-12-02 MyNameIsSwap

只要你不明確所期望的行爲狀態，您將可以大大減少我們的機會來幫你。你不應該試圖*「在div上創建一個類」*。相反，你應該*「打開一個菜單」*。或者關閉/隱藏它......等等。添加類是一種手段並結束。什麼是結局？另外請注意，將您的網站添加爲實例並不實際，因爲當您的問題在網站上被修復時，問題將失去相關性。請在問題本身中添加工作片段（[mcve]），重現問題並清楚地說明期望的結果。 –

你的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')之外觸發的點擊事件進行評估，這在理論和實踐中都會使您的頁面更快更輕，從而獲得更好的用戶體驗。

來源

2017-12-02 23:39:23

首先，我想在添加類__headerbg_上的

，當我點擊_.hamburger_類，然後當我再次單擊_.hamburger_類時，我想刪除/刪除

的類_.headerbg_。 – MyNameIsSwap

@MyName，更新了一個清晰的解釋。（*我希望。*） –

在#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"); 
    } 

}); 
});

來源

2017-12-02 23:33:49 M0ns1f

好的經驗法則......不要多次搜索同一個選擇器的dom – charlietfl

當然'if（...）{...} else {...}'業務會簡化爲另一個'.toggleClass ）'？ –

謝謝，這個也工作得很好！ – MyNameIsSwap

如果您需要添加樣式ID您應該通過attr函數傳遞樣式。這樣

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

，你可以刪除它像這樣

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

這種方式，您可以切換它

來源

2017-12-02 23:40:09 samehanwar

無法使用Javascript從div中刪除類

回答

相關問題