1 
ftemplate =  Handlebars.compile '''
    <div class="filter">
       <ul class="list">
           <li><a href="#" class="today active">Today</a></li>
           <li><a href="#" class="month">Month</a></li>
           <li><a href="#" class="year">Year</a></li>
       </ul>
    </div>'''

我有一个列表，我想根据单击的元素添加一个类。以下是我用来实现此目的的咖啡脚本代码。

class exports.InfoController extends Backbone.View
  tagName: 'div'
  className : 'box'
  events:
    "click a.today" : "_filterTodayClicked"
    "click a.year" : "_filterYearClicked"
    "click a.month" : "_filterMonthClicked"

  _filterYearClicked: (e) =>
    e.preventDefault()
    @model.goToTimeFrame "year"

  _filterMonthClicked: (e) =>
    e.preventDefault()
    @model.goToTimeFrame "month"

  _filterTodayClicked: (e) =>
    e.preventDefault()
    @model.goToTimeFrame "day"

我要做的是引用 this.parent 然后循环遍历所有元素，从每个元素中删除“活动”类（如果存在），然后将其添加到单击的元素中。在伪代码中：

_filterYearClicked(e) =>
    e.preventDefault()
    (this).parent.('a').removeClass('active')
    (this).addClass('active)

我不能简单地访问类“列表”并使用它而不是 this.parent 的原因是因为有许多其他列表（具有相同的类）也由同一个控制器控制，我不想让这些类在其他要更改的列表。我曾尝试在网上寻找方法，但根本没有找到可行的解决方案。任何帮助或有用文档的链接将不胜感激

4

1 回答 1

3

您可以查看事件currentTarget以确定您的位置，然后closest将您带回适当的根并find返回：

_filterYearClicked: (e) =>
  e.preventDefault()
  $t = $(e.currentTarget)
  $t.closest('ul').find('.active').removeClass('active')
  $t.addClass('active')  
  #...

演示： http: //jsfiddle.net/ambiguous/rPLTU/（仅连接年份）

或者您可以使用视图$el将.active搜索限制为当前视图：

_filterYearClicked: (e) =>
  e.preventDefault()
  @$el.find('.active').removeClass('active')
  $(e.currentTarget).addClass('active')
  #...

演示： http: //jsfiddle.net/ambiguous/cHKUt/（仅连接年份）

于 2013-07-15T16:04:08.023 回答