0

我想在用户使用 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>
4

4 回答 4

0

我会在使用 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 调用获得成功响应时，将链接的一个属性值设置为“完成”或某个值。每当单击链接时，首先检查该值是否已设置。如是。不要再做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    
             }
           });
       }
    });        
});
于 2012-05-14T14:42:09.673 回答
0

查看此小提琴以通过 javascript 禁用按钮。

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

于 2012-05-14T14:45:48.097 回答
0

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

请参阅此小提琴示例！

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

笔记：

添加e.preventDefault();以禁止浏览器遵循 href 属性。（在这里阅读）

于 2012-05-14T14:46:55.660 回答
0

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

$("a.vote_up").click(function(){
    // you ajax request here
    $(this).unbind('click');
});
于 2012-05-14T15:07:36.770 回答