Jordan Jordan - 2 months ago 20
jQuery Question

alternative to multiple data selector

I'm using jplist plugin and following contributor's recommendations to toggle sorting.

But having issue with multiple data-attribute selector.

To trigger I need to select the element by multiple attribute like data-path, data-order and I don't know why : I can't trigger using a selector with multiple attributes.
The console doesn't show any error. This just doesn't work

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


The html buttons :

<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>


The html toggle

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


All suggestions are welcome.

Answer

You have to remove the space between the attributes, so this

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

becomes this

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

otherwise you're looking for descendant elements, just as you would with

$('div span')