Question

我有一个包含几个表格行的表格，所以我创建了一个点击事件，当点击特定的myCollection元素时会更新td，这样可以正常工作。我想要做的是显示一个bootstrap＆＃34; tick＆＃34;表明这个元素是＆＃34;活跃的＆＃34;点击时。

如果我在控制台上运行$('.activate').addClass('glyphicon glyphicon-ok');，它会将类添加到具有.activate类的所有元素，而不是触发事件的类。我也可以在下面的函数中运行这一行，结果相同。

我似乎无法使用以下代码完成此工作：

'click .activate': function (event, template) {

     var id=event.target.getAttribute("data-id");

      myCollection.update({_id: id}, {$set: {status: "active"}});

      // I've tried variations of the line below with no success
      $(this).closest("td").addClass("glyphicon glyphicon-ok");

 }

当页面重新加载时，我想要显示＆＃34; tick＆＃34;在正确的地方。我不确定如何做到最好。我不能这样做，例如：

{{#each myCollection}}
  {{#if status=="active"}}
     <p>display stuff</p>
  {{/if}}
{{/each}}

我有什么想法可以让它发挥作用吗？

提前致谢：）

Answer 1

在事件处理程序内部，this是被单击元素的上下文，而不是元素本身。更多的流星＆＃39;方法是使用反应性而不是jQuery来更新DOM。

<template name="table">
  {{#each myCollection}}
    {{> tr}}
  {{/each}}
</template>

<template name="tr">
  <td class="activate">Activate</td>
  <td>
    {{#if active}}
    <span class="glyphicon glyphicon-ok"></span>
    {{/if}}
  </td>
</template>

Template.table.myCollection = function () {
  return myCollection.find();
};

Template.tr.active = function () {
  return this.status === "active";
};

Template.tr.events({
  'click .activate': function (event, template) {
    myCollection.update(this._id, {$set: {status: "active"}});
  }
});

Answer 2

如果你正处于持久状态（这似乎就是这种情况），Neil的答案是要走的路。

如果您只需要一些临时UI效果，可以使用以下jQuery：

$(event.target).addClass("glyphicon glyphicon-ok");

（您尝试的代码几乎相同，但使用$(event.target)代替$(this)）

Meteor：在click事件上向表元素添加一个类

2 个答案: