Question

我想知道完成以下内容的最有效和最好的做法。这种情况很简单：如果你点击下一个链接，点击上一个链接减少pagenum或增加。然后将它与其父数据一起发送给一个函数。

我知道如何通过执行两个不同的功能来实现这一点，但我想要一个简单，快速的方法。

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

在此代码中，有拼写错误：

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

纠正它：

<a class="prevpg">Previous</a> //remove "." for class names

现在，对于实际问题，您可以通过以下方式了解单击了哪个类：

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

如果要检查的条件超过2个，请使用switch或else if梯形图来调用相应的函数。对于您的代码，只有2个案例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)
});

Answer 2

考虑使用内联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);
});

Answer 3

试试这样：

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

Answer 4

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

我还假设您打算获取值"hello world"，而不是"hello world Previous Next"

HTML

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

JS

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);
        }
    });
}

Answer 5

我认为可以用它来完成（使用数据属性）

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

和js

$(".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", .....);

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

5 个答案: