我有以下标签元素:
<div class="sort_by_group group-3">
<ul class="sort_by">
<li class="ui-btn-active" data-order-by="price">Billigast<br>3.677 kr<div class="small_text">per person</div></li>
<li class="" data-order-by="traveltime">Snabbast<br>4.476 kr<div class="small_text">per person</div></li>
<li class="" data-order-by="best">Bäst<br>4.096 kr<div class="small_text">per person</div></li>
</ul>
</div>
我需要在点击第二个 li 等时更改类
我试着这样做:
$('ul.sort_by li').off('click').on('click', function() {
$('ul.sort_by li.ui-btn-active').removeClass('ui-btn-active');
$(this).addClass('ui-btn-active');
$("#filter_order_by").val($(this).attr('data-order-by'));
Track.log_event(`Click order by: ${$(this).attr('data-order-by')}`);
onUpdated();
}.bind(this));
但是,它会删除类而不是将类添加到点击的元素。
我的问题在哪里?
最佳答案
添加e
作为点击函数的事件
,然后使用添加类e.target
:
$('ul.sort_by li').off('click').on('click', function(e) {
$('ul.sort_by li.ui-btn-active').removeClass('ui-btn-active');
$(e.target).addClass('ui-btn-active');
$("#filter_order_by").val($(this).attr('data-order-by'));
Track.log_event(`Click order by: ${$(this).attr('data-order-by')}`);
onUpdated();
}.bind(this));
所以首先更改:on('click', function(e) {
然后是 $(e.target).addClass('ui-btn-active');
此处为简单 fiddle :https://jsfiddle.net/xvb2rsuv/2/
关于javascript - 我没有在点击时更改类(class),我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/49816109/