我正在尝试创建一个 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>
最佳答案
当选择触发事件的元素(而不是文档本身)时,您应该使用 $(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"}});
}
},
});
关于javascript - 使用 Meteor 中的 Javascript 事件在多个预设字段之间切换 MongoDB 文档,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/30216327/