时间戳

首页 > 解决方案 > 通过 jquery 获取选定的订单类型

jquery - 通过 jquery 获取选定的订单类型

问题描述

我正在尝试使用 Adaptive Horizo​​ntal Tab Menu 插件根据各种条件（例如最新、最相关等）对我的订单进行排序。我使用 ajax 和部分加载来加载过滤器结果。在发送 ajax 请求之前查看我选择的排序类型没有问题。当部分视图在 html 中被替换时，问题就出现了。我将 Jquery 用于 ajax 进程。我知道我必须使用类似跟随的东西，但它根本不起作用。我认为这与我正在使用的插件有关。我把html和javascript代码。

 <div id="tabs" class="ah-tab-wrapper dt-sl">
                            <ul id="tabul" class="ah-tab dt-sl orderby">
                                <li id="1" class="ah-tab-item" value="1" data-ah-tab-active="true">
                                    مرتبط ترین
                                </li>
                                <li id="2" class="ah-tab-item" value="2">
                                    پربازدیدترین
                                </li>
                                <li id="3" class="ah-tab-item" value="3">
                                    جدیدترین
                                </li>
                                <li id="4" class="ah-tab-item" value="4">
                                    پرفروش ترین
                                </li>
                                <li id="5" class="ah-tab-item" value="5">
                                    ارزان ترین
                                </li>
                                <li id="6" class="ah-tab-item" value="6">
                                    گران ترین
                                </li>
                            </ul>
                        </div>

javascript代码：

$(document).on('click', '#tabul.ah-tab li', function (e) {
    alert($(this).val());});

通过简单地通过 id 选择这个 ul 或者它的类不起作用。我真的很困惑。任何帮助是极大的赞赏。非常感谢你。

标签： jquery

解决方案

不是 100% 确定您需要什么，但使用下面的代码可以按顺序显示所有 id。

或者显示所有<li>具有该data-ah-tab-active="true"属性的元素。

片段：

$(document).on('click', '.optionA', function() {
  var arr = $(".ah-tab-item").map(function() {
    return this.id; // RETURN ID OF LI ELEMENT
  });
  $("#result").html(""); // CLEAR DIV RESULTS
  $("#result").append(arr.get().join(", ")); // SHOW RESULTS
});

$(document).on('click', '.optionB', function() {
  var arr = $(".ah-tab-item[data-ah-tab-active=true]").map(function() {
    return this.id; // RETURN ID OF LI ELEMENT
  });
  $("#result").html(""); // CLEAR DIV RESULTS
  $("#result").append(arr.get().join(", ")); // SHOW RESULTS
});
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div id="tabs" class="ah-tab-wrapper dt-sl">
  <ul id="tabul" class="ah-tab dt-sl orderby">
    <li id="1" class="ah-tab-item" value="1" data-ah-tab-active="true">ONE</li>
    <li id="2" class="ah-tab-item" value="2">TWO</li>
    <li id="3" class="ah-tab-item" value="3">THREE</li>
    <li id="4" class="ah-tab-item" value="4" data-ah-tab-active="true">FOUR</li>
    <li id="5" class="ah-tab-item" value="5">FIVE</li>
    <li id="6" class="ah-tab-item" value="6">SIX</li>
  </ul>
</div>
<div>
<button type="button" class="optionA btn btn-primary">Display ALL LI id's by current sort</button>
</div>
<button type="button" class="optionB btn btn-secondary">Display ALL LI id's which have attribute "data-ah-tab-active = active"</button>

<div class="card">
  <div id="result" class="card-body">Click a button above</div>
</div>

推荐阅读