Question

在我的Meteor项目中，我有两个按钮。一个按钮是upvote按钮，它为条目的分数添加一个点，而另一个按钮是downvote按钮，相反。我的网站不需要登录。

如何限制它，以便任何给定的设备最初只能点击upvote或downvote按钮，然后如果该设备决定更改它的投票，它应该只能点击另一个按钮，依此类推？

Answer 1

听起来像常规的old radio button应该可以做到。

我也做了一些更好的东西，看到 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。但它只适用于最新的浏览器。如果你想为旧浏览器提供suppoert，那么你也可能对这个question感兴趣。如果您的用户群不使用very old browsers，那么您可以使用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";
    }
});

允许按钮仅在流星中单击一次

2 个答案: