javascript - 使用 Meteor 中的 Javascript 事件在多个预设字段之间切换 MongoDB 文档

Question

我正在尝试创建一个 Meteor 事件，以便在单击模板的一部分时更新文档的“类”字段。我需要在该字段的 3 个单独的预设值之间旋转。到目前为止，我已经尝试使用 jQuery if else 语句和 .hasClass() 来确定当前分配了哪个类，但没有成功。

Template.buttonGrey.events({
 "click .toggleGrey": function (e) {
   if($(this).hasClass("myButtonGrey")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkFast"}});
   } else if ($(this).hasClass("myButtonGreyBlinkFast")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkSlow"}});
   } else {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGrey"}});
   }
 },
});

这也是我的 HTML Meteor 模板的副本。

<template name="buttonGrey">
<a href="#" class="toggleGrey {{class}}">{{number}}</a>
</template>

Answer 1

当选择触发事件的元素(而不是文档本身)时，您应该使用 $(e.target) 而不是 $(this ):

Template.buttonGrey.events({
 "click .toggleGrey": function (e) {
   if($(e.target).hasClass("myButtonGrey")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkFast"}});
   } else if ($(e.target).hasClass("myButtonGreyBlinkFast")) {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkSlow"}});
   } else {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGrey"}});
   }
 },
});

但是给定数据上下文，您也可以直接使用 this (在本例中是文档)，无需 jQuery:

Template.buttonGrey.events({
 "click .toggleGrey": function (e) {
   if(this.class === "myButtonGrey") {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkFast"}});
   } else if (this.class === "myButtonGreyBlinkFast") {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGreyBlinkSlow"}});
   } else {
    ButtonsGrey.update(this._id, {$set: {class: "myButtonGrey"}});
   }
 },
});