如何使用jQuery和Backbone.js库添加活动类（active class）

Question

我要使用jQuery和Backbone.js库在标签上添加一个活动类...我已经做了一些事情，但当我点击该标签时没有任何反应。

HTML：

<div class="bets_view">
  <div class="filtering_options">
    <a href="#brzn/yolo/all" class="btn btn-filter">All</a>
    <a href="#brzn/yolo/open" class="btn btn-filter">Open</a>
    <a href="#brzn/yolo/closed" class="btn btn-filter">Closed</a>
    <a href="#brzn/yolo/ended" class="btn btn-filter">Ended</a>
    <a href="#brzn/yolo/resolved" class="btn btn-filter">Resolved</a>
  </div>
</div>

jQuery:

  events:
    "click a.btn-filter": "activeTab"

  activeTab: (e)->
    $el.removeClass("active-tab")
    $(this).addClass("active-tab")

- Valip

---

你使用了错误的方法。activeTab 处理程序不应更改DOM。它应该更改模型的状态，这应该由您的视图的render反映。 - hindmost

请您能否更明确一些？我应该在我的代码中做出哪些改变呢？ - Valip

一旦您提供更多细节，我会更明确地表达。我猜那不是您完整的JS代码。 - hindmost

页面上有很多基于交互的JS代码，但我认为可以通过点击事件添加“active”类。 - Valip

我认为可以通过单击事件添加活动类。当然可以。但这是 jquery 的方法。如果使用 Backbone，最好使用它的方法。否则，Backbone 就毫无用处了。 - hindmost

如果我能使用jQuery来解决这个问题，那就没问题了，事实上这样会更好。 - Valip

Answer 1

在 Backbone 中，this 指的是当前视图，而不是触发事件的元素。

您可以从 e 对象中获取元素：（CoffeeScript 语法）

activeTab: (e)->
    elem = e.currentTarget
    $elem = $(e.currentTarget)

    ## Remove .active class from previous item
    $('.filtering_options a.active').removeClass('active-tab')

    ## Set .active class to clicked item
    $elem.addClass("active-tab")

- Tasos K.