javascript - 我没有在点击时更改类(class)

Question

我有以下标签元素:

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

但是，它会删除类而不是将类添加到点击的元素。

我的问题在哪里？

Answer 1

添加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/