複数のデータセレクタの代替

Question

私はjplistプラグインを使用しており、寄稿者のソートのトグルを推奨しています。

しかし、複数のデータ属性セレクタに問題があります。

トリガー私はdata-path、data-orderのような複数の属性で要素を選択する必要があります。理由は分かりません。複数の属性を持つセレクターを使用してトリガーすることはできません。 コンソールにエラーは表示されません。これはちょうど

$('#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

あなたは属性間のスペースを削除する必要があるので、この

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

がそうでなければ、あなたがちょうどあなたが

$('div span') 

と同じように、子孫要素を探している、この

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

なり