使用咖啡脚本更改特定元素中的类答案

【问题标题】：Changing classes in specific elements using coffeescript使用咖啡脚本更改特定元素中的类
【发布时间】：2013-07-16 00:04:08
【问题描述】：

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)

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

【问题讨论】：

标签： jquery backbone.js coffeescript handlebars.js

【解决方案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/（仅连接年份）

【讨论】：