你好,我正在尝试实现像堆栈溢出这样的投票系统,我已经完成了后端//整个功能,但是我在 UI 中显示它们时遇到了问题。现在,箭头看起来相距太远,数字也不是很居中。另外,如果可能的话,我希望在单击/取消单击时切换箭头的颜色。我试过这个,但不断弄乱用户界面。有人可以帮我吗?先感谢您。
<td class="vert-align">
<div>
<a href="/post/{{ post.slug }}/vote?is_up=1" class="vote">
<span class="glyphicon glyphicon-triangle-top" style="" aria-hidden="true"></span></a>
<br /> //upper arrow
<span class="number"><h4 id="vote_count_{{ post.slug }}">{{ post.get_vote_count }}</h4></span> <br> //number gets displayed here
<a href="/post/{{ post.slug }}/vote?is_up=0" class="vote">
<span class="glyphicon glyphicon-triangle-bottom" aria-hidden="true"></span></a>
</div> //under arrow
</td>
我还有一个js文件用于这次投票
function vote(node) {
var thread_id = node.attr("href").split('\/')[2];
$.ajax({
url: node.attr("href"),
dataType: "json",
success: function(data) {
$("#vote_count_"+thread_id).html(data.count);
},
error: function(data) {
alert(data.responseJSON.error_message);
}
});
}
$("a.vote").on("click", function() {
vote($(this));
return false;
});
谢谢。
最佳答案
要使用 Bootstrap (我可以看到您正在使用)实现此设计,您可以简单地使用此模板:
<div class="row">
<div class="col-md-1" style="font-size: 30px; color:#606060; text-align: center;">
<span class="glyphicon glyphicon-triangle-top col-md-12"></span>
<span class="col-md-12">0</span><!-- Number goes here -->
<span class="glyphicon glyphicon-triangle-bottom col-md-12"></span>
</div>
</div>
如果您想在单击时切换箭头颜色,请使用使用 var( bool 值)的 Javascript 方法来确定按钮是否被单击,然后使用 jQuery 方法 .css() 可以更改箭头的颜色想要的按钮。
关于javascript - 投票箭头,如带有 Bootstrap 的堆栈溢出,如何减小字形图标元素的大小并使它们更紧密,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/35238287/