2017-01-27 2 views
0

リストレベルを指定するクラスを持つリストアイテムを含むネストされたリストがあります。クラス検出と警告

どのレベルがクリックされたのかを検出したいのですが、コードが機能していません。誰かが私に正しいplsを入力できます。

$("li").click(function (e) { 
 
    if ($(this).hasClass('sub-level3')){ 
 
     alert("this list item contains class-sub-level3"); 
 
    } else if ($(this).hasClass('sub-level4')) { 
 
     alert("this list item contains class-sub-level3"); 
 
    } else { 
 
     //do nothing 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<li class="has-dropdown sub-level3 not-click moved"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
</li> 
 
<li class="has-dropdown sub-level4 not-click moved"> 
 
    <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
</li>

+3

Uhm ...これらのメッセージは同一です。 –

+1

elseのコンソールに何かログを記録しようとしましたか?あなたが使っているものを見るために 'e'を記録するか? 'window.console.log()'は常に良いデバッグフレンドです:-) – AymDev

答えて

1

コードは期待通りに働いています。 jQueryを含めるのを忘れてしまったり、混乱したメッセージをあなたに混乱させたりします。あなたが見ることができるようにそれが動作します:

$("li").click(function (e) { 
 
    if ($(this).hasClass('sub-level3')){ 
 
     alert("Level 3"); 
 
    } else if ($(this).hasClass('sub-level4')) { 
 
     alert("Level 4"); 
 
    } else { 
 
     //do nothing 
 
    } 
 
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 

 
<ul> 
 
    <li class="has-dropdown sub-level3 not-click moved"> 
 
     <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    </li> 
 
    <li class="has-dropdown sub-level3 not-click moved"> 
 
     <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
    </li> 
 
    <ul> 
 
     <li class="has-dropdown sub-level4 not-click moved"> 
 
      <a href="http://www.w3schools.com">Visit W3Schools.com!</a> 
 
     </li> 
 
    </ul> 
 
</ul>

+0

こんにちはマンフレッド、あなたは正しいですが、なぜ私は複数のポップアップメッセージを取得して知っていますか? –

+0

@BobtheBuilder私が提供したコードまたは投稿したコードでは、複数のコードが得られません。問題はコード内のどこかにある必要があります。 (おそらく、複数のクラスのクリックハンドラを設定していますか?) –

+0

私は奇妙な伝播の問題 –

0

私はそれは同様にサブLEVEL4を解雇したが、私は固定私が述べた方法を、使用することができませんでしサブLEVEL3クリックしたときに、私はプロパゲーションタイプの問題がありました今すぐ次のコードで、ありがとう!

$("li.sub-level3").click(function (e) { 

       alert("sub3"); 
      }); 

      $(document).on('click', 'li.sub-level4', function (e) { 

       alert("sub4"); 

      });