Question

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>'''

我有一个列表，我想根据点击的元素添加一个类。以下是我用来实现这一目的的coffeescript代码。

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然后循环遍历所有元素，从每个元素中移除“active”类（如果存在），然后将其添加到单击的元素中。在伪代码中：

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

我不能简单地访问类'list'并使用它而不是this.parent的原因是因为有许多其他列表（具有相同的类）也由同一个控制器控制而我不希望有要更改的其他列表中的类。我已经尝试过在线搜索方法，但根本没有找到可行的解决方案。任何帮助或指向有用文档的链接都将非常感激

Answer 1

您可以查看活动的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/（仅连接年）

使用coffeescript更改特定元素中的类

1 个答案: