作出click事件

我的「箭頭」的工作這是我的HTML：作出click事件

<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變量，它是爲Click事件className財產上調。事件沒有className屬性。您可以改用e.currentTarget.className。

或者，您可以使用jQuery的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

您必須使用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'); 
    }) 
})

最終代碼：

<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

回答

相關問題