Question

我希望在用户使用Ajax对某个帖子评分后禁用按钮。目标是避免这篇文章的票数增加。这是代码，帮帮我

<script type='text/javascript'>
$(function(){
    $("a.vote_up").click(function(){
    //get the id
    the_id = $(this).attr('id');

    // show the spinner
    $(this).parent().html("<img src='images/spinner.gif'/>");

    //fadeout the vote-count 
    $("span#votes_count"+the_id).fadeOut("fast");

    //the main ajax request
        $.ajax({
            type: "POST",
            data: "action=vote_up&id="+$(this).attr("id"),
            url: "votes.php",
            success: function(msg)
            {
                $("span#votes_count"+the_id).html(msg);
                //fadein the vote count
                $("span#votes_count"+the_id).fadeIn();
                //remove the spinner
                $("span#vote_buttons"+the_id).remove();

            }
        });
    });


}); 
</script>

Answer 1

我会在使用hide方法发布之后隐藏锚标记。您需要做的另一件事是使用preventDefault方法来防止链接的默认行为。

 $(function(){
    $("a.vote_up").click(function(e){
    e.preventDefault();
    var item=$(this);
    the_id = item.attr('id');
    $(this).parent().html("<img src='images/spinner.gif'/>");
    $("span#votes_count"+the_id).fadeOut("fast");

        $.ajax({
            type: "POST",
            data: "action=vote_up&id="+the_id,
            url: "votes.php",
            success: function(msg)
            {
                $("span#votes_count"+the_id).html(msg);                 
                $("span#votes_count"+the_id).fadeIn();                   
                $("span#vote_buttons"+the_id).remove();
                item.hide();  // hide the link

            }
        });
    });    

});

如果你想保持链接的原样而不隐藏它，你可以这样做。当您从ajax调用中获得成功响应时，将链接的一个属性值设置为“done”或某个值。无论何时单击链接，首先检查是否设置了值。如是。不要再做ajax了。像这样的东西。

 $(function(){
    $("a.vote_up").click(function(e){
      e.preventDefault();
      var item=$(this);
      if(item.attr("status")!="voted")
      {
         the_id = item.attr('id');
         $(this).parent().html("<img src='images/spinner.gif'/>");
         $("span#votes_count"+the_id).fadeOut("fast");

          $.ajax({
             type: "POST",
             data: "action=vote_up&id="+the_id,
             url: "votes.php",
             success: function(msg)
             {
                $("span#votes_count"+the_id).html(msg);                 
                $("span#votes_count"+the_id).fadeIn();                   
                $("span#vote_buttons"+the_id).remove();
                item.attr("status","voted");
                item.addClass("disabledLook"); //apply a css class to make the link look like disabled    
             }
           });
       }
    });        
});

Answer 2

查看this fiddle以通过javascript停用按钮。

如果您希望在刷新页面后仍保持禁用状态，则必须使用html5存储，Cookie或会话变量存储用户投票的位置。

Answer 3

您可以使用Jquery .one()将单击绑定到a标记：

请参阅此Fiddle Example!

$(function(){
    //click only once
    $("a.vote_up").one("click", function(e) {
        e.preventDefault();
        $('p').append('clicked ');
    });
});

注意：

添加e.preventDefault();以禁止浏览器关注href属性。（read here）

Answer 4

使用一行代码发送请求后a的简单取消绑定操作：

$("a.vote_up").click(function(){
    // you ajax request here
    $(this).unbind('click');
});

Ajax按钮禁用

4 个答案: