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 event，然后使用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');

简单小提琴：https://jsfiddle.net/xvb2rsuv/2/

李没有改变点击类

1 个答案: