javascript - 使用 jquery 检查哪个类被单击的有效方法

Question

我想知道完成以下任务的最有效和最佳实践。情况很简单:如果单击上一个链接，则减少 pagenum；如果单击下一个链接，则增加 pagenum。然后将其与其父数据一起发送到函数。

我知道如何通过为 on 执行两个不同的函数来实现此目的，但我想要一种简单且更快的方法。

HTML:

 <div>
      hello world
    <a class="prevpg>Previous</a>
    <a class="nextpg">Next</a>
   </div>

JavaScript:

   $(document).on('click', '.prevpg, .nextpg', function(){
     var element = $(this).parent('div').text();  
//    if ,prevpg was clicked
        somefunction(pagenum--, element)
//    else if .nextpg clicked
       somefunction(pagenum++,element)
    })



 function somefunction(pagenum, data ){
  var test = true; 
  if(data == 'hello world'){
     test = false; }
    $.ajax({
        url: 'search',
        type: 'GET',
        data: {'pagenumber':pagenum, testdata: test} ,
        dataType: 'json',
        success: function(res){
            $('body').append(res.data);
     }
     });
    }

Answer 1

考虑这个使用内联 onClick 事件进行演示的示例。

HTML

<div>
  hello world
  <a class="prevpg" onClick="someFunction('prev', this)">Previous</a>
  <a class="nextpg" onClick="someFunction('next', this)">Next</a>
</div>

JS

function somefunction(action, el) {

    if(action == 'prev') pagenum--;
    else pagenum++;

    var data = $(el).parent('div').text();

    // AJAX call
}

编辑(仅 JS 解决方案)

$('.prevpg, .nextpg').on('click', function(){

    if($(this).attr('class') == 'prevpg') pagenum--;
    else pagenum++;

    var data = $(this).parent('div').text();

    // AJAX call
    // If you need some function call it like this
    // someFunction(pagenum, data);
});