Jquery串联与php中的upvotes

时间:2015-02-24 05:24:31

标签: javascript php jquery

我使用php和jquery创建了投票系统。

这是我的index.php:

<script type="text/javascript" src="js/jquery-1.9.0.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {

    //####### on page load, retrive votes for each content
    $.each( $('.voting_wrapper'), function(){

        //retrive unique id from this voting_wrapper element
        var unique_id = $(this).attr("id");

        //prepare post content
        post_data = {'unique_id':unique_id, 'vote':'fetch'};

        //send our data to "vote_process.php" using jQuery $.post()
        $.post('vote_process.php', post_data,  function(response) {

                //retrive votes from server, replace each vote count text
                $('#'+unique_id+' .up_votes').text(response.vote_up); 
            },'json');
    });



    //####### on button click, get user vote and send it to vote_process.php using jQuery $.post().
    $(".voting_wrapper .voting_btn").click(function (e) {

        //get class name (down_button / up_button) of clicked element
        var clicked_button = $(this).children().attr('class');

        //get unique ID from voted parent element
        var unique_id   = $(this).parent().attr("id"); 


        if(clicked_button==='up_button') //user liked the content
        {
            //prepare post content
            post_data = {'unique_id':unique_id, 'vote':'up'};

            //send our data to "vote_process.php" using jQuery $.post()
            $.post('vote_process.php', post_data, function(data) {

                //replace vote up count text with new values

                $('#'+unique_id+' .up_votes').text(data);
                //thank user for liking the content
dataModified = data+' users has voting including you';
$('#message-status').hide().html(dataModified).fadeIn('slow').delay(5000).hide(1);
            }).fail(function(err) { 

            //alert user about the HTTP server error
            alert(err.statusText); 
            });
        }

    });
    //end 

});

</script>
<style type="text/css">
<!--
.content_wrapper{width:500px;margin-right:auto;margin-left:auto;}
h3{color: #979797;border-bottom: 1px dotted #DDD;font-family: "Trebuchet MS";}

/*voting style */
.voting_wrapper {display:inline-block;margin-left: 20px;}
.voting_wrapper .up_button {background: url(images/index.png) no-repeat;float: left;width: 50px;cursor:pointer;}
.voting_wrapper .up_button:hover{background: url(images/index.png) no-repeat;}
.voting_btn{float:left;margin-right:5px;}
.voting_btn span{font-size: 11px;float: left;margin-left: 3px;}

-->
</style>
</head>

<body>
<div class="content_wrapper">
    <h3><img src="9780143332497.jpg" alt=""><br />

        <!-- voting markup -->
        <div class="voting_wrapper" id="1001">
            <div class="voting_btn">
                <div class="up_button">&nbsp;</div><span class="up_votes"></span>
            </div>
        </div>
        <!-- voting markup end -->
    </h3>
<span id="message-status"></span>
</div>

当我点击率按钮时,它会将计数显示为稳定,而且我设置为显示投票计数数字淡入和淡出。

现在我需要这样http://s1.postimg.org/mv060km8v/Untitled_1.png

我试图在我的jquery脚本中添加“用户已投票”文本,但似乎没有任何结果。

我可以知道,在哪里可以添加确切的代码来满足我的需求?

任何人都可以帮助我吗?提前谢谢。

2 个答案:

答案 0 :(得分:2)

在index.php中

//retrive votes from server, replace each vote count text
$('#'+unique_id+' .up_votes').text(response.vote_up + ' user has voted'); 

在jquery中单独添加计数尝试添加文本。

答案 1 :(得分:0)

你究竟想要隐藏按钮的内容是什么?

包括用户投票你需要添加  $('#'+ unique_id +'。up_votes')。text(数据+'用户已投票');