は、クリックイベント

に私の "矢印" の作業を行いますこれは私のHTMLです：は、クリックイベント

<div class="navigation-arrows"> 
    <div class="left-arrow"> 
     <a href="#" class="navigation a-left"> 
     <span class="fa fa-chevron-left" aria-hidden="true"></span> 
     </a> 
    </div> 
    <div class="right-arrow"> 
     <a href="#" class="navigation a-right"> 
     <span class="fa fa-chevron-right" aria-hidden="true"></span> 
     </a> 
    </div> 
    </div>

そして、JSは次のようである：

$('a.navigation').on('click', function(e){ 
     console.log('click'); 
     if (e.className === 'navigation a-left') 
     console.log('left'); 
     } else if (e.className === 'navigation a-right') { 
     console.log('right'); 
     } 
    });

私は私の矢印はクリックで働くことにしたいです。しかし、私は何が間違っているのか理解できません。クリックすると動作しますが、条件はありません。 console.log('click');のみが動作します。どんな助けでも感謝します。ありがとう。

出典

2016-08-29 Alex Zakruzhetskyi

を試してみてください、あなたのコード内の問題は、あなたがたクリックイベントでe変数からclassNameプロパティを読み取ろうとしているということです育った。イベントにはclassNameというプロパティはありません。代わりにe.currentTarget.classNameを使用できます。

また、jQueryのhasClass()メソッドを使用することもできます。要素のクラスを並べ替えるか、要素を追加/削除する必要がある場合は、これが壊れないので、これははるかに信頼性が高くなります。

$(document).ready(function(){ 

    $('a.navigation').on('click', function(){ 
     alert('click'); 

     if ($(this).hasClass("navigation a-left")) 
      alert('left'); 

     else if($(this).hasClass("navigation a-right")) 
      alert('right'); 
    }) 
})

決勝コード：：あなたはhasClassを使用する必要があります

$('a.navigation').on('click', function(e){ 
    var $el = $(this); 
    if ($el.hasClass('a-left')) { 
     console.log('left'); 
    } else if ($el.hasClass('a-right')) { 
     console.log('right'); 
    } 
});

出典

2016-08-29 16:11:19

私はあなたのコード内のいくつかの変更を行っている、この

$('a.navigation').on('click', function(){  
     if ($(this).attr('class') === 'navigation a-left'){ 
     console.log('left'); 
     } else if ($(this).attr('class') === 'navigation a-right') { 
     console.log('right'); 
     } 
    });

出典

2016-08-29 16:10:34

：これを試してみてください

<html> 
 
    <title>This is test</title> 
 
    <head> 
 
    </head> 
 
    <body> 
 
     
 
     <div class="navigation-arrows"> 
 
      <div class="left-arrow"> 
 
       <a href="#" class="navigation a-left"> 
 
        <span class="fa fa-chevron-left" aria-hidden="true">Left</span> 
 
       </a> 
 
      </div> 
 
      
 
      <div class="right-arrow"> 
 
       <a href="#" class="navigation a-right"> 
 
        <span class="fa fa-chevron-right" aria-hidden="true">Right</span> 
 
       </a> 
 
      </div> 
 
     </div> 
 
     
 
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script> 
 
     <script> 
 
      
 
     $(document).ready(function(){ 
 

 
      $('a.navigation').on('click', function(){ 
 
       alert('click'); 
 

 
       if ($(this).hasClass("navigation a-left")) 
 
        alert('left'); 
 

 
       else if($(this).hasClass("navigation a-right")) 
 
        alert('right'); 
 
      }) 
 
     }) 
 
      
 
     </script> 
 
    </body> 
 
</html>

出典

2016-08-29 16:20:49 Ehsan

答えて

関連する問題