允許按鈕在流星中只點擊一次

Question

在我的Meteor項目中，我有兩個按鈕。一個按鈕是一個upvote按鈕，它爲條目的分數增加了一個分數，而另一個按鈕是downvote按鈕，這相反。我的網站不需要登錄。

如何限制它，以便任何給定的設備最初只能點擊upvote或downvote按鈕，然後如果該設備決定更改其投票，則應該只能點擊其他按鈕，等等。 ？

Answer 1

您可以使用HTML 5 LocalStorage。但它只適用於最新的瀏覽器。如果你想爲舊瀏覽器支持，那麼你也可能對這個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，以便應用程序可以跟蹤用戶的投票，即使用戶稍後訪問同一站點時也是如此，因爲用戶可以在沒有登錄的情況下進行投票。

編輯：根據您的評論，對不同的模板/主題有不同的投票。假設您在模板的當前數據中擁有當前主題的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"; 
    } 
}); 

Answer 2

這聽起來像一個普通的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>