在模板事件中向元素添加类答案

【问题标题】：add class to element in template event在模板事件中向元素添加类
【发布时间】：2017-09-29 12:40:12
【问题描述】：

这个 Meteor 模板代码尝试在没有不必要的调用的情况下向元素添加类。 event.currentTarget.addClass('active'); 加课失败？我做错了什么？

// inside the template events
'click #login-form-link': function (event) {
    $('#login-form-link').addClass('active'); // extra call
    event.currentTarget.addClass('active');   // cheap but did not work
 },

【问题讨论】：

你有什么问题？
event.currentTarget.addClass is not a function 是浏览器控制台上的错误。
这是一个jQuery方法，所以是$(event.currentTarget).addClass('active');或event.currentTarget.classList.add('active');
那是因为 event.currentTarget 对象不是 jquery 对象，所以你不能在它上面调用addClass()。您需要先使用选择器找到它
$(this).addClass('active') 也失败了，

标签： javascript jquery meteor

【解决方案1】：

虽然这个问题已经回答了，但我不得不提一下，这个任务可以在不使用 jQuery 的情况下完成：

'click #login-form-link'(event) => {
  event.target.classList.add('active');
},

classList 是一个支持add()、remove() 和toggle() 方法的属性，只是浏览器支持的不同：有些浏览器不支持这些方法的多个参数，但所有这些方法（不包括真的很老）有基本的支持。

MDN documentation.

【讨论】：

【解决方案2】：

您需要将事件目标转换为 jQuery 对象

'click #login-form-link'(event) => {
    $(event.target).addClass('active');
 },

请注意，this 将是您单击的元素背后的数据上下文，而不是您可以添加类的 DOM 元素。

您无法真正摆脱额外的调用，因为您需要以某种方式获取对 DOM 节点的引用，$(event.target) 与任何方法一样好。

【讨论】：