У меня есть группа ссылок для сортировки, например. категорию, имя, дату и другую группу для восходящего/нисходящего. Первоначально, когда страница загружается, ни один из них не будет выбран, и результаты не будут в любом порядке. Когда выбор сделан, мне нужно иметь значения для обеих групп, т.е. сортировка и сортировка.
Например, если пользователь выбирает сортировку по категории, функция ниже использует ASC в качестве направления сортировки по умолчанию. Затем мне также необходимо выделить ссылку с параметром data-value-value = "asc", добавив класс 'selected' в ссылку.
Может ли кто-нибудь помочь?
$('.sort a').click(function(e) {
var $this = $(this);
// Turn 'selected' class on/off
if ($this.hasClass('selected'))
return false;
$this.parents('.sort-set').find('.selected').removeClass('selected');
$this.addClass('selected');
if($('.sortKey a.selected').attr('data-option-value')){
key = $('.sortKey a.selected').attr('data-option-value');
} else {
var key = 'date';
//.addClass('selected'); HOW TO DO THIS??
}
if($('.sortOrder a.selected').attr('data-option-value')){
order = $('.sortOrder a.selected').attr('data-option-value');
} else {
var order = "asc";
//.addClass('selected'); HOW TO DO THIS??
}
$container.isotope({sortBy: valBy, sortAscending: valAscending});
return false;
});
<div class="option-combo sort">
<ul class="sort sort-set clearfix sortKey">
<li><a href="#" data-option-value="name">Name</a></li>
<li><a href="#" data-option-value="category">Category</a></li>
<li><a href="#" data-option-value="date">Expiry Date</a></li>
</ul>
</div>
<div class="option-combo sort">
<ul class="sort sort-set clearfix sortOrder">
<li><a href="#" data-option-value="asc">Ascending</a></li>
<li><a href="#" data-option-value="desc">Descending</a></li>
</ul>
</div>
Вы можете использовать значение атрибута в селекторе:
$("element[attribute='value']").addClass('selected')
Основываясь на ваших комментариях, похоже, вам может понадобиться сделать что-то вроде этого:
$("a[data-option-value='asc']", ".sortOrder").addClass('selected')