Question

我有以下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按钮时，它应返回data-order类的sortorder值与$("#loadmore").click(function () { var order= $('.sortorder').attr('data-order'); alert(order); // the problem is that this is alerting only asc value });类，以供AJAX进一步处理。

例如

#loadmore

这里的问题是，当点击asc按钮时，它只返回第一个值。在这种情况下，无论数据是作为asc还是desc进行整理，它都只返回notifyItemChanged值。

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

Answer 1

问题是因为有多个.sortorder元素。在集合上调用attr()将仅返回该集合中第一个元素的值。要解决此问题，您可以使用循环：

$("#loadmore").click(function () {
    $('.sortorder').each(function() {
        var order = $(this).data('order');
        console.log(order);

        // further processing
    });
});

当我选择数据顺序desc并单击loadmore按钮时，我应该返回desc而不是asc，而不是asc。

要实现这一目标，您需要一种了解哪个按钮处于活动状态的方法。要执行此操作，您可以在单击按钮时在按钮上放置一个类，然后在单击#loadmore时按该类选择元素。试试这个：

$(document).on('click', '.sortorder', function() {
    $('.sortorder.active').removeClass('active');
    var order = $(this).data('order').addClass('active');

    // further processing
});  

$("#loadmore").click(function () {
    var order = $('.sortorder.active').data('order');
    console.log(order);

    // further processing
});

Answer 2

您可以使用一个隐藏的输入字段

喜欢，

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

你可以这样做。

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

Answer 3

您无需在按钮点击时阅读订单值。只需将订单变量设为全局变量即可。请尝试以下：

var order = "asc";//Global Variable


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

$("#loadmore").click(function () {
    $('.sortorder').each(function() {
        //var order = $(this).data('order'); //Need not read it again
        console.log(order);
    });
});

在jquery

3 个答案: