div的动态高度

Question

好吧，我正在尝试做类似/不同的脚本。酒吧必须以绿色显示喜欢的百分比。

这是我的javascript代码

$(document).ready(function(){

    // like and unlike click
    $(".like, .unlike").click(function(){
       // do some tratement

        // AJAX Request
        $.ajax({
            url: 'likeunlike.php',
            type: 'post',
            data: {postid:postid,type:type,userid:userid},
            dataType: 'json',
            success: function(data){
                var likes = data['likes'];
                var unlikes = data['unlikes'];
                var ratio = (parseInt(unlikes) / (parseInt(unlikes) + parseInt(likes))) *100;

                $("#likes_"+postid).text(likes);        // setting likes
                $("#unlikes_"+postid).text(unlikes);    // setting unlikes
                $("#likeBarprcent_"+postid).css({"height":ratio+'%'}); // 
                if(type == 1){
                    $("#like_"+postid).css("color","#ffa449");
                    $("#unlike_"+postid).css("color","lightseagreen");
                }

                if(type == 0){
                    $("#unlike_"+postid).css("color","#ffa449");
                    $("#like_"+postid).css("color","lightseagreen");
                }
            }
        });
    });
});

这是我的HTML代码

<div class="likeBar" id="likeBar_<?php echo $postid; ?>">
    <div id="likebarprcent_<?php echo $postid; ?>"><?php echo $ratio ?></div>
</div>

当用户点击喜欢或不喜欢时，它会自动更新我的计数器（例如，不喜欢）而不刷新整个页面。 我想做什么，它会自动更新我的likebarpcent div的高度。

例子：当用户在我的索引页面上时，高度的条形为66％（2个喜欢，1个不喜欢）。如果用户点击不喜欢（所以2个喜欢，2个不喜欢），那么高度的标尺现在是50％。