Javascript 允许按钮在Meteor中只单击一次

在我的Meteor项目中，我有两个按钮。一个按钮是“向上投票”按钮，它为条目的分数添加一个点，而另一个按钮是“向下投票”按钮，它的作用正好相反。我的网站不需要登录

我如何限制它，使任何给定的设备最初只能单击“向上投票”或“向下投票”按钮，然后如果该设备决定更改其投票，它应该只能单击其他按钮，依此类推？

这听起来像是一个普通人应该做的

我也做了一些更漂亮的东西，看这个

更新

增加了@4castle的撤销投票功能。手感不错

更新2

根据OP的请求，单选按钮现在是箭头

html， 身体{ 框大小：边框框； 背景：111人； 颜色：DDD； 字体：400 16px/1.4“Verdana”； 高度：100vh； 宽度：100vw； } *, *：之前， *：之后{ 框大小：继承； 保证金：0； 填充：0； 边框：0、0、0、0； 大纲：0无hlsa0%，0，0，0； } 字段集{ 边距：0.1米1米1米； 填充：8px； 边界半径：9px； 边界：3倍双FF8； 宽度：100%； 最大宽度：19em； } 传奇{ 字体：小型大写700 1.5rem/2Palatino Linotype； 颜色：FD1； } /*拉兹*/ radz input.chkrad{ 显示：无； } radz input.chkrad+标签{ 颜色：EEE； 背景：透明； 字体大小：16px； } radz输入。chkrad：选中+标签{ 颜色：0ff； 背景：透明； 字体大小：16px； } radz input.chkrad+标签范围{ 显示：内联块； 宽度：18px； 高度：18px； 余量：-1px15px0； 垂直对齐：基线； 光标：指针； } radz输入+标签跨度{ 背景：透明； 线高：100%； } 输入。A+标签范围：之前{ 内容:'△'; 颜色：0ff； 字体风格：普通； 字号：700； 字体大小：24px； } 输入.A:选中+标签范围：之前{ 填充：-5px 15px 5px； 字体大小：16px； } 输入.A:选中+标签范围：之前{ 内容:'▲'; 颜色：0ff； 字体风格：普通； 字号：700； 字体大小：24px； } 输入。B+标签范围：之前{ 内容:'▽'; 颜色：0ff； 字体风格：普通； 字号：700； 字体大小：24px； } 输入B：选中+标签范围{ 填充：-5px 15px 5px； 字体大小：16px； } 输入。B：选中+标签范围：之前{ 内容:'▼'; 颜色：0ff； 字体风格：普通； 字号：700； 字体大小：24px； } input.fade+标签跨度， 输入。淡入淡出：选中+标签范围{ -webkit过渡：背景0.7s线性； -moz过渡：背景0.7s线性； 过渡：背景0.7s线性； } 选票 向上的 向下 你可以用。但它只适用于最新的浏览器。如果您还想支持旧浏览器，那么您可能也会对此感兴趣。如果您的用户群不使用，那么您可以像这样使用LocalStorage

在模板创建的回调中

Template.yourTemplate.created = function () {
    var template = this;
    var userVote = null;
    if(typeof(Storage) !== "undefined") {
        userVote = localStorage.getItem("userVote");
    }
    template.userVote = new ReactiveVar(userVote); //or you can use Session.setDefault("userVote", userVote)
}

Template.yourTemplate.created = function () {
    var template = this;
    template.userVote = new ReactiveVar(null); //or you can use Session.setDefault("userVote", null)
    template.autorun(function () {
        var data = Template.currentData();
        var topicId = data.topicId;
        var userVote = null;
        if(typeof(Storage) !== "undefined") {
            userVote = localStorage.getItem("userVote" + topicId);
        }
        template.userVote.set(userVote); //or you can use Session.set("userVote", userVote);
    });
}

当用户单击向上或向下按钮时

Template.yourTemplate.events({
    'click #upButton': function (ev, template) {
         localStorage.setItem("userVote", "up");
         template.userVote.set("up"); // or Session.set("userVote", "up");
    },
    'click #downButton': function (ev, template) {
         localStorage.setItem("userVote", "down");
         template.userVote.set("down"); // or Session.set("userVote", "down");
    }
});

Template.yourTemplate.events({
    'click #upButton': function (ev, template) {
         var topicId = this.topicId;
         localStorage.setItem("userVote" + topicId, "up");
         template.userVote.set("up"); // or Session.set("userVote", "up");
    },
    'click #downButton': function (ev, template) {
         var topicId = this.topicId;
         localStorage.setItem("userVote" + topicId, "down");
         template.userVote.set("down"); // or Session.set("userVote", "down");
    }
});

然后要禁用按钮，可以在助手中执行类似操作

Template.yourTemplate.helpers({
    'isUpButtonDisabled': function () {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "up";
    },
    'isDownButtonDisabled': function (ev, template) {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "down";
    }
});

Template.yourTemplate.helpers({
    'isUpButtonDisabled': function () {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "up";
    },
    'isDownButtonDisabled': function (ev, template) {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "down";
    }
});

更新：这个答案使用localStorage，这样应用程序就可以跟踪用户的投票，即使用户稍后访问同一个站点，这也是OP试图做的，因为用户无需登录即可进行投票

编辑：根据您的评论，对不同的模板/主题进行不同的投票。假设模板的当前数据中有当前主题的id。你可以这样做

在模板创建的回调中

Template.yourTemplate.created = function () {
    var template = this;
    var userVote = null;
    if(typeof(Storage) !== "undefined") {
        userVote = localStorage.getItem("userVote");
    }
    template.userVote = new ReactiveVar(userVote); //or you can use Session.setDefault("userVote", userVote)
}

Template.yourTemplate.created = function () {
    var template = this;
    template.userVote = new ReactiveVar(null); //or you can use Session.setDefault("userVote", null)
    template.autorun(function () {
        var data = Template.currentData();
        var topicId = data.topicId;
        var userVote = null;
        if(typeof(Storage) !== "undefined") {
            userVote = localStorage.getItem("userVote" + topicId);
        }
        template.userVote.set(userVote); //or you can use Session.set("userVote", userVote);
    });
}

当用户单击向上或向下按钮时

Template.yourTemplate.events({
    'click #upButton': function (ev, template) {
         localStorage.setItem("userVote", "up");
         template.userVote.set("up"); // or Session.set("userVote", "up");
    },
    'click #downButton': function (ev, template) {
         localStorage.setItem("userVote", "down");
         template.userVote.set("down"); // or Session.set("userVote", "down");
    }
});

Template.yourTemplate.events({
    'click #upButton': function (ev, template) {
         var topicId = this.topicId;
         localStorage.setItem("userVote" + topicId, "up");
         template.userVote.set("up"); // or Session.set("userVote", "up");
    },
    'click #downButton': function (ev, template) {
         var topicId = this.topicId;
         localStorage.setItem("userVote" + topicId, "down");
         template.userVote.set("down"); // or Session.set("userVote", "down");
    }
});

然后要禁用按钮，可以在助手中执行类似操作

Template.yourTemplate.helpers({
    'isUpButtonDisabled': function () {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "up";
    },
    'isDownButtonDisabled': function (ev, template) {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "down";
    }
});

Template.yourTemplate.helpers({
    'isUpButtonDisabled': function () {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "up";
    },
    'isDownButtonDisabled': function (ev, template) {
         var template = Template.instance();
         var userVote = template.userVote.get(); // or Session.get("userVote");
         return userVote === "down";
    }
});

---

您还想取消投票吗？添加JS代码，允许用户通过再次单击所选投票来取消选择他们的投票。@zer00ne有没有办法让图标充当单选按钮，这样您就看不到箭头旁边的单选按钮？@jswny Check my的诀窍是在实际输入被取消时设置标签样式显示：无详细信息在代码笔中，您必须根据您计划使用的字体图标进行调整。我不同意。单选按钮解决方案不是持久性的。我也很欣赏这个答案！啊，我道歉。如果你要更新你的答案，也许提到目标是给予坚持，那么让我把我的反对票改为赞成票。对不起，这是我的错misunderstanding@Kishor如果我的应用程序使用了许多不同的模板，每个模板都需要单独检查用户是否自己点击了upvote/downvote，那么这会起作用吗？@jswny否当您在另一个模板上执行相同操作时，这将覆盖上一个模板。如果您希望它适用于单个主题，那么您可能需要执行类似以下localStorage.getItemuserVote+topicId；，topicId来自当前投票的主题。@Kishor似乎我打错了什么。现在都修好了，非常感谢！