替代多个数据选择器

Question

我正在使用 jplist 插件并遵循贡献者的建议来切换排序。

但是多个数据属性有问题select或。

要触发，我需要通过数据路径、数据顺序等多个属性 select 元素，我不知道为什么：我无法使用 select 或多个属性。控制台没有显示任何错误。这根本行不通

$('#toggle-order1').click(function() {

   // current sort button selected in sort group 1 -- return data-path
   var sortpath1 = $('#sortgroup1 .jplist-selected').attr('data-path');

   // current sort button selected in sort group 1 -- return data-order
   var sortorder1 = $('#sortgroup1 .jplist-selected').attr('data-order');

   if (sortorder1 == 'asc') {
       // *** This doesn't click any button
       $('button[data-path="' + sortpath1 + '"] [data-order="desc"]').trigger('click');

       // *** This work but click all buttons that have data-path equals to sortpath1
       $('button[data-path="' + sortpath1 + '"]').trigger('click');

   }
   else if (sortorder1 == 'desc') {
       // *** This doesn't click any button
       $('button[data-path="' + sortpath1 + '"] [data-order="asc"]').trigger('click');

       // *** This work but click all buttons that have data-path equals to sortpath1
       $('button[data-path="' + sortpath1 + '"]').trigger('click');
   }
});

html 个按钮：

<div id="sortgroup1" class="jplist-box" data-control-type="sort-buttons-group" data-control-name="sort-buttons-group-1" data-control-action="sort" data-mode="single">

   <button id="set-asc-1" name="set" class="jplist-drop-down" data-path=".set" data-group="group1" data-type="text" data-order="asc" data-selected="false">
       Sort by Set AZ
   </button>

   <button id="set-desc-1" name="set" class="jplist-drop-down" data-path=".set" data-group="group1" data-type="text" data-order="desc" data-selected="false">
       Sort by Set ZA
   </button>

   <button id="price-asc-1" name="price" class="jplist-drop-down" data-path=".price" data-group="group1" data-type="number" data-order="asc" data-selected="false">
       Sort by Price ASC
   </button>

   <button id="price-desc-1" name="price" class="jplist-drop-down" data-path=".price" data-group="group1" data-type="number" data-order="desc" data-selected="false">
       Sort by Price DESC
   </button>

</div>

html切换

<button id="toggle-order1"><i class="fa"></i></button>

欢迎所有建议。

Answer 1

你必须去掉属性之间的space，所以这个

$('button[data-path="' + sortpath1 + '"] [data-order="desc"]')

变成这样

$('button[data-path="' + sortpath1 + '"][data-order="desc"]')
//                                     ^^ look ma, no space

否则你正在寻找后代元素，就像你

$('div span')

替代多个数据选择器

alternative to multiple data selector

jquery

jplist