Javascript 使用jquery检查单击哪个类的有效方法

我想知道实现以下目标的最有效和最佳实践。情况很简单：如果单击“上一个链接”，则减少pagenum；如果单击“下一个链接”，则增加pagenum。然后将其与其父数据一起发送给函数

我知道如何通过为on执行两个不同的函数来实现这一点，但我想要一种简单、快速的方法

Html:

试着这样做：

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

---

在该代码中，存在输入错误：

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

如果您有两个以上的条件要检查，请使用

开关

或

else if

梯形图调用相应的功能。对于您的代码，只有两种情况可以使用

if-else

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

---

您的html/代码有几个问题，我已经清理了它们并添加了答案

我还假设您打算获取值

“hello world”

，而不是

“hello world Previous Next”

HTML

---

考虑这个示例，它演示了内联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解决方案）

---

我认为这是可能的（使用数据属性）

如果要将事件绑定到文档，请使用名称空间

$(document).on("click.HANDLE_CLICK_LINK", .....);

---

第6行的输入错误，您的意思是

元素

不是

elment

。为什么要使用父div？如果（$（this）.attr（'class'）==“prevpg”）html中的所有内容都是动态的，您可能可以尝试一下。我需要将父div的内容传递到另一个函数中。sry缩进已关闭，仅此而已。它被更正了。@ravitadi你可以检查一下我的回答是否解决了你的问题。谢谢@Samuel的回答，这是一个很好的接近我试图做的事情的方法吗？我编辑了这个问题。只是想让ajax调用不要使用内联javascript，因为不同浏览器的行为不同。谢谢你的回答@Script Shiva。很好的回答，不幸的是，在我的例子中，html是动态的（由javascript生成），因此无法工作。@fuserthrower您能解释一下吗？在任何浏览器中，我都没有发现简单的onClick有什么不同。它们的工作原理都是一样的。签出这个@fuserthrower我接受你的链接，但是在这种情况下，这个代码只出现在这个页面上，也只出现在页面的两个地方。显然没有可维护性问题。我看不到你在链接中所说的任何浏览器兼容性。无论如何，谢谢你的回复。

$(this).hasClass("prevpg");

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

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

pagenum = 0;

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

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

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

function somefunction(action, el) {

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

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

    // AJAX call
}

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

<div>
  hello world
  <a class="control" data-move="-1">Previous</a>
  <a class="control" data-move="+1">Next</a>
</div>

$(".control").on("click", function(e){
  var t_number = parseInt($(this).attr("data-move")),
      element  = $(this).parent('div').text();

  someFunction(total + t_number, $(this));
  return false;
});

$(document).on("click.HANDLE_CLICK_LINK", .....);