javascript – 投票箭头,如堆栈溢出和bootstrap,如何减少字形图标项的大小,并使它们更紧

2019年7月20日 223次阅读

您好我正在尝试实现像堆栈溢出这样的投票系统,我已经完成了后端//整个功能但我在UI中显示它们时遇到问题.现在,箭头看起来太远,而且数字并不是很中心.此外,如果可能的话,我希望在单击/不单击时切换箭头的颜色.我试过这个,但不断搞砸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(布尔值)的Javascript方法确定是否单击了按钮,然后使用jQuery方法.css()可以更改所需按钮的颜色.

实例 – http://www.bootply.com/6KzWhJefif

点赞