刪除jQuery但.className + =不工作？

-4

我有一個非常簡單的畫布菜單在jQuery中工作正常。我試圖重寫它在香草的JavaScript。刪除jQuery但.className + =不工作？

在下面的代碼中，addClass（這是jQuery）正在工作，但.className + =不是。

var burger = document.getElementsByClassName('l-burger'); 
var html = document.querySelectorAll('html'); 

$(burger).click(function(){ 
    $(html).className += ' menu-opening'; // not working 

    setTimeout(function(){ 
    $(html).addClass('menu-open'); 
    $(html).removeClass('menu-opening'); 
    }, 300); 
});

來源

2016-07-07 Evans

* 「我現在試圖重寫它在香草的javascript」 * 1。你的意思是直接使用DOM（jQuery的*是* 「香草的JavaScript」）。 2.那你爲什麼還在使用jQuery？ '$（html）'調用jQuery並獲取一個jQuery對象。 –

** 1。**你提到你要替換jQuery，但是你使用'$（html）'。 ** 2。**每個文檔應該只有一個''元素，不需要使用'querySelectorAll'，而是使用'document.documentElement'。 ** 3。**一旦你得到了對native元素的引用，你最好使用'classList.add（'someClassName'）' – haim770

......儘管'className + =「菜單打開」你不想使用'classList'。但現在'classList'的支持非常好。 –

這是因爲$（html）爲您提供了一個jQuery對象，而不是本機DOMElement。

您可以在jQuery對象的關鍵0訪問本地元素：

$(html)  // returns a jQuery object 
$(html)[0] // returns a native DOMElement

所以要加一個類名，你應該使用這樣的事情：

$(html).className += ' menu-opening';

來源

2016-07-07 11:27:57 Schlaus

用途：document.querySelector('html').className = document.querySelector('html').className + ' myClassName'

或如評論建議：

var htmlNode = document.querySelector('html'); 
htmlNode.className = htmlNode.className + ' myClassName'

甚至清潔劑：document.querySelector('html').classList.add('myClassname')

來源

2016-07-07 11:30:53 aximus

將元素的引用保存到變量中會更有效，而不是查詢DOM兩次。 – Schlaus

刪除jQuery但.className + =不工作？

回答

相關問題