允許按鈕僅在流星中單擊一次

Question

在我的Meteor項目中，我有兩個按鈕。 一個按鈕是上upvote按鈕，它為條目的得分添加一個分數，而另一個按鈕是下downvote按鈕，其作用相反。 我的網站不需要登錄。

如何限制它，以便任何給定的設備最初只能單擊“ upvote或“ downvote按鈕，然后如果該設備決定更改其投票，則它應該只能單擊其他按鈕，依此類推？

Answer 1

聽起來像是一個普通的舊單選按鈕應該可以解決問題。

我也做了一些更奇特的東西，請參見CodePen 。

更新

添加了@ 4castle的撤銷投票功能。 很好

更新2

根據OP的請求，單選按鈕現在是箭頭。

CodePen 2

 html, body { box-sizing: border-box; background: #111; color: #DDD; font: 400 16px/1.4'Verdana'; height: 100vh; width: 100vw; } *, *:before, *:after { box-sizing: inherit; margin: 0; padding: 0; border: 0 none hlsa(0%, 0, 0, 0); outline: 0 none hlsa(0%, 0, 0, 0); } fieldset { margin: 0 1em 1em 1em; padding: 8px; border-radius: 9px; border: 3px double #FF8; width: 100%; max-width: 19em; } legend { font: small-caps 700 1.5rem/2"Palatino Linotype"; color: #FD1; } /* RadZ */ #radz input.chkrad { display: none; } #radz input.chkrad + label { color: #EEE; background: transparent; font-size: 16px; } #radz input.chkrad:checked + label { color: #0ff; background: transparent; font-size: 16px; } #radz input.chkrad + label span { display: inline-block; width: 18px; height: 18px; margin: -1px 15px 0 0; vertical-align: baseline; cursor: pointer; } #radz input + label span { background: transparent; line-height: 100%; } input.A + label span:before { content: '△'; color: #0ff; font-style: normal; font-weight: 700; font-size: 24px; } input.A:checked + label span:before { padding: -5px 15px 5px; font-size: 16px; } input.A:checked + label span:before { content: '▲'; color: #0ff; font-style: normal; font-weight: 700; font-size: 24px; } input.B + label span:before { content: '▽'; color: #0ff; font-style: normal; font-weight: 700; font-size: 24px; } input.B:checked + label span { padding: -5px 15px 5px; font-size: 16px; } input.B:checked + label span:before { content: '▼'; color: #0ff; font-style: normal; font-weight: 700; font-size: 24px; } input.fade + label span, input.fade:checked + label span { -webkit-transition: background 0.7s linear; -moz-transition: background 0.7s linear; transition: background 0.7s linear; } 

 <fieldset id="radz" name="radz"> <legend>Vote</legend> <input type='radio' name='rad' id="rad1" class="chkrad A fade" value='1' /> <label for="rad1"><span></span>Up</label> <br/> <input type='radio' name='rad' id="rad2" class="chkrad B fade" value='2' /> <label for="rad2"><span></span>Down</label> <br/> </fieldset> 

 // Rescind vote function provided by 4castle // http://stackoverflow.com/users/5743988/4castle var selectedRad; var voteRads = document.querySelectorAll('input[name="vote"]'); for (var i = 0; i < voteRads.length; i++) { voteRads[i].onclick = function() { if (selectedRad == this) { this.checked = false; selectedRad = null; } else { selectedRad = this; } }; } 

 .rad1 + label:after { content: '△'; } .rad1:checked + label:after { content: '▲'; } .rad2 + label:after { content: '▽'; } .rad2:checked + label:after { content: '▼'; } 

 <input id="up" type="radio" class="rad1" name="vote"> <label for="up"></label> <br/> <label>Vote</label> <br/> <input id="down" type="radio" class="rad2" name="vote"> <label for="down"></label> 

Answer 2

您可以使用HTML 5 LocalStorage 。 但是，它將僅在最新的瀏覽器上運行。 如果您也想為舊版瀏覽器提供支持，那么您可能也會對此問題感興趣。 如果您的用戶群使用的瀏覽器不是很舊，則可以使用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.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.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;
    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) {
         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";
    }
});