jquery：オブジェクトにクラス名を追加する

Question

オフキャンバスのサイドバーをトリガーするボタンがあります。オフキャンバスのサイドバーがアクティブな場合、メニューボタンはクリックできません。 そのため、私はクラス名 "js-off-canvas-exit"と "is-visible"を調べようとしています。メニューボタンはクラス名を "is-active"にする必要があります。そうでなければこのクラス名はメニューボタン。

私の試みは次のようになります。

var menuButton = document.getElementById('menuButton'); 
    menuButton.addEventListener('click', function(e) { 
    menuButton.classList.toggle('is-active'); 
    e.preventDefault(); 
    }); 


    $('.js-off-canvas-exit .is-visible').click(function() { 
    menuButton.removeClass('is-active');// add classname is-active to menuButton 
    } 


    $('.js-off-canvas-exit:not(.is-visible)').click(function() { 
    menuButton.addClass('is-active');// remove classname is-active from menuButton 
    } 

誰かが私はこの作業を取得するために助けることができますか？

Answer 1

menuButtonがネイティブDOM要素であるため、jQueryオブジェクトを作成する必要があります。 removeClass()とaddClass()のメソッドはDOM要素ではなくjQueryオブジェクトで使用できるためです。

$(menuButton).removeClass('is-active'); 

代わりの

menuButton.removeClass('is-active'); 

あなたはElement.classListオブジェクトのadd()とremove()を使用することができます。