Question

这是我的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');有效。任何帮助将不胜感激。感谢。

Answer 1

您的代码中的问题是您尝试从className变量中读取e属性，该变量是引发的click事件。事件没有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');
    }
});

Answer 2

我在您的代码中做了一些更改，试试这个

$('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');
      }
  });

Answer 3

您必须使用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>

制作我的＆＃34;箭头＆＃34;处理点击事件

3 个答案: