要素がクラスを追加するクラスに別の要素を持っている場合

Question

私はこのことを正しく行っているかどうかはわかりません。私はオープンとクローズを切り替えるメニューを持っています。メニューがhasClass("open");の場合、ボタンが表示されます。 class openがなくなればクラスを削除したいと思います。

ここはHTMLの部分です。 nav、a、closed：

<nav> 
    <a class="closed"><i class="fa fa-bars"></i>Menu</a> 
     <ul> 
      <li>Menu items</li> 
     </ul> 
    <div class="close-btn"> 
     <i class="fa fa-times" aria-hidden="true"></i> 
    </div> 
</nav> 

HTMLが働くので、これはその重要ではありません、重要な部分は、要素があるということです。

jQueryの部分はここにあります。

$(document).ready(function(jQuery) { 
    if ($("nav a").hasClass("open")) { 
     $(".close-btn").addClass('show-me-the-button'); 
    } else { 
     $(".close-btn").removeClass('show-me-the-button'); 
    } 
}); 

しかし、これは機能しません。私はstackoverflowを検索しましたが、すべて私にこのコードを与えました...なぜそれが動作していないのか分かりません。私はスクリプトのエラーを取得...任意のヘルプ？

Answer 1

初期ページの読み込み時にのみクラスをチェックします。 openクラスはどこで変更しますか？その場所でこのコードを移動する必要があります。

Answer 2

ユーザー - オリョールはこのようなハンドラ内にコードを配置しようとすると、正しい

です：

$(document).ready(function(jQuery) { 

    $('nav a').on('click', function(e) { // <----------- Click Handler (jQuery) 

     // Use $(this) to access current clicked element 
     if ($(this).hasClass("open")) { 
      $(".close-btn").addClass('show-me-the-button'); 
     } else { 
      $(".close-btn").removeClass('show-me-the-button'); 
     } 

    }) 

}); 

ホープ

Click Handler in jQueryについての詳細を参照してください。このことができます！