具有相同类的锚标记在jquery中单击按钮时不返回值答案

【问题标题】：Anchor tags with same class not returning value on button click in jquery具有相同类的锚标记在jquery中单击按钮时不返回值
【发布时间】：2017-06-19 10:36:40
【问题描述】：

我有以下 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 类的锚标记的data-order 值，以供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。

在选择数据顺序和单击LoadMore按钮时，它应该返回DESC而不是ZH，它现在正在进行。

【问题讨论】：

标签： javascript php jquery ajax sorting

【解决方案1】：

你可以取一个隐藏的输入框，

喜欢，

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

然后每当你点击排序类

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

你可以这样做。

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

【讨论】：

您的回答帮助我解决了这个问题。你能告诉我如何用多个具有相同类名的复选框做类似的事情吗？
复选框？而不是数据顺序？我的意思是，如果检查了 desc 而不是这样的 desc ？
否，选择多个复选框作为值数组来查询数据库中的这些值。在这种情况下如何将数组传递给隐藏字段？
这是不可能的事情吧？您想将复选框的所有选中值传递给隐藏字段吗？在这种情况下，通过 JSON.stringify(your_arr) 转换数组并保存在隐藏变量中。

【解决方案2】：

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

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

        // further processing
    });
});

是什么时候选择数据顺序并单击loadMore按钮时，它应该返回desc而不是zh r，它不做。

要实现这一点，您需要一种知道哪个按钮处于活动状态的方法。为此，您可以在单击按钮时在按钮上放置一个类，然后在单击 #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
});

【讨论】：

【解决方案3】：

您无需在单击按钮时读取订单值。只需将 order 变量设为全局变量即可。试试下面：

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

【讨论】：