根据用户是否投票设置布局样式
Set style in layout based on if user voted
我制作了一个页面,人们可以在其中投票支持或反对论点。当他们登录时。但当他们投票给一个论点时,他们无法查看他们是否已经投票给了一个论点。例如,如果有超过1个人在列表中添加论点,你就看不出你是否已经投票。
我的代码是这样的:
Template.postArgument.events({
'click .remove':function(event){
var currentUserId = Meteor.userId();
if(currentUserId === this.createdBy ) {
event.preventDefault;
var documentId = this._id;
Arguments.remove({_id:documentId});
}
},
'click':function() {
Session.set('selected_argument', this._id);
},
'click .yes':function() {
if(Meteor.user()) {
var postId = Arguments.findOne({_id:this._id})
if($.inArray(Meteor.userId(), postId.voted) !==-1) {
return "Voted";
} else {
var argumentId = Session.get('selected_argument');
Arguments.update(argumentId, {$inc: {'score': 1 }});
Arguments.update(argumentId, {$addToSet: {voted: Meteor.userId()}});
}
}
},
'click .no':function() {
if (Meteor.user()) {
var postId = Arguments.findOne({_id:this._id})
if ($.inArray(Meteor.userId(), postId.voted) !==-1) {
return "Ok";
} else {
var argumentId = Session.get('selected_argument');
Arguments.update(argumentId, {$inc: {'score': -1 }});
Arguments.update(argumentId, {$addToSet: {voted : Meteor.userId()}});
if (postId.score <= -3) {
Arguments.remove({_id:this._id})
}
}
}
}
});
现在我想更改他们投票后点击的按钮的背景颜色。就像在Facebook上一样。但改变后的颜色应该只有投票人才能看到。对其他人来说,一切都不应该改变。这个possble怎么样?
我在var argumentId = Session.get('selected_argument');
之后尝试了类似$(this).css('background-color', 'red');
的东西但没有奏效。
不要将此作为一个操作,而是在您的模板中执行:
<div class="someBaseClass {{#if voted}}votedClass{{/if}}">
...rest of your html
</div>
然后创建一个助手,如果用户已经投票,则返回true。
Template.myTemplate.helpers({
voted: function(){
var argument = Arguments.findOne(){_id: this._id});
return argument.voted.indexOf(Meteor.userId) > -1;
}
});
相关文章:
- 访问布局信息是否也会导致浏览器重排
- 如何设置html元素填充的动画
- 使用agility.js进行页面布局和合成
- 需要帮助设置json数组
- 以下数据布局在设置显示上向上移动:无
- HTML图像布局使用PHP变量,该变量是用JavaScript动态设置的〔o r…〕
- jQuery UI布局插件OVERFLOW设置
- 角度 UI 布局 - 如何动态设置宽度
- 将显示:无设置为第一行的单元格会弄乱表格布局
- 在 extJS 中设置边框布局的最小高度
- 根据用户是否投票设置布局样式
- 如何使用javascript和django设置两列布局
- Zend动态设置布局
- 网页(应用程序)布局-设置100%高度(html,css)
- 在d3部队布局中设置链接
- 在d3强制布局中只设置一个节点(根)注释可拖动
- 设置最大长度的链接在D3树布局
- 强制布局设置固定距离每个节点后,即使拖拽
- 如何设置Extjs面板's布局适合整个页面
- 设置流体布局中选择图元的样式时出现问题