javascript – 具有相同类的锚标签在jquery中单击按钮时不返回值

我有以下HTML：

<a class="sortorder" data-order="asc" >sort ascending</a> 
<a class="sortorder" data-order="desc">sort descending</a>    

这些锚标记用于对使用ajax从MysqL表返回的值进行排序.

$(document).on('click', '.sortorder', function() {
  var order = $(this).attr('data-order');
  //further processing
});  

上面的代码根据点击的内容返回值asc或desc.还有一个按钮,用于使用AJAX从MysqL表加载更多数据：

<button id="loadmore">Load more</button>         

这个按钮的jQuery是上面jQuery的外部.我想要的是,当单击#loadmore按钮时,它应该返回带有sortorder类的锚标签的数据顺序值,以供AJAX进一步处理.

例如

$("#loadmore").click(function () {
  var order= $('.sortorder').attr('data-order');
  alert(order); // the problem is that this is alerting only asc value
});

这里的问题是,当单击#loadmore按钮时,它只返回第一个值.在这种情况下,它只返回asc值,而不管数据是作为asc还是desc进行分类.

我选择数据顺序desc并单击loadmore按钮时,它应该返回desc而不是asc,它现在正在做什么.

解决方法:

你可以拿一个隐藏的输入字段,

喜欢,

<input type="hidden" id="current_order" value="">

然后每当你点击sortorder类

$(document).on('click', '.sortorder', function() {
  var order= $(this).attr('data-order');
  $("#current_order").val(order);
});

然后在loadmore,

$("#loadmore").click(function () {
  var cur_order =   $("#current_order").val();
 console.log(order);
});

你可以这样做.

如果需要,还可以将默认排序顺序值设置为隐藏输入字段.