jQuery中的2阶段按钮

Question

我是 jQuery 新手，所以请不要对我评价太苛刻！

我正在制作一个列出视频的页面，每个视频下都有一个投票按钮。该按钮分两个阶段工作，首先单击它展开按钮，然后第二次单击应使用 PHP/Ajax 确认投票。如果您在提交之前单击另一个按钮，则应重置第一个按钮。

我将下面的内容放在一起尝试完成，第一部分是展开按钮，然后是提交投票。它有点工作，但我注意到，如果您单击一个按钮，然后单击另一个按钮，然后返回到第一个按钮，它会提交投票。关于如何让这个工作的任何想法？还是更好的工作方式？

提前致谢！

<script>
$(window).load(function(){
    $("ul li .button").click(function() { 
        $("ul li .button").removeClass("active-button");    
        $("ul li .button").text("Vote for this");
        $(this).addClass("active-button");
        $(this).text("Submit vote");
        stop;
    });
});

$(document).on("click", "ul li .button", function () {
     if ( $(this).hasClass( "active-button" ) ) {
        $("ul li .active-button").click(function()
            {
            var id = $(this).attr("id");
            var name = $(this).attr("name");
            var dataString = 'id='+ id ;
            var parent = $(this);

            if (name=='up')
                {
                    $.ajax({
                        type: "POST",
                        url: "up_vote.php",
                        data: dataString,
                        cache: false,

                        success: function(html)
                        {
                        parent.html(html);
                        }
                    });
                }
        });
     }
});
</script>


<ul class="videos clearfix">
    <?php include('config.php');
        $sql=mysql_query("SELECT * FROM messages LIMIT 4");
        while($row=mysql_fetch_array($sql))
            {
                $msg=$row['msg'];
                $mes_id=$row['mes_id'];
                $up=$row['up'];
                $title=$row['title'];
    ?>

            <li>
                <h2><?php echo $title; ?></h2>
                <?php echo $msg; ?>
                <div id="<?php echo $mes_id; ?>" name="up" class="button vote">Vote for this</div>    
            </li> 

    ?php } ?>

</ul>  

Answer 1

不要有两个单独的点击处理程序，将它们合并为一个：

$(document).on("click", "ul li .button", function () {
     if ( $(this).hasClass( "active-button" ) ) {
            var id = $(this).attr("id");
            var name = $(this).attr("name");
            var dataString = 'id='+ id ;
            var parent = $(this);

            if (name=='up')
                {
                    $.ajax({
                        type: "POST",
                        url: "up_vote.php",
                        data: dataString,
                        cache: false,

                        success: function(html)
                        {
                        parent.html(html);
                        }
                    });
                }

     }else{
           $("ul li .button").removeClass("active-button");    
           $("ul li .button").text("Vote for this");
           $(this).addClass("active-button");
           $(this).text("Submit vote");
    }    
});