Question

我有一个带有ajax请求的jquery代码，但是jquery没有显示结果（vote_count）和更改upvote图像，就像stackoverflow一样：

jquery代码：

$(function(){
    $("a.vote_up").click(function(){
    //get the id
    the_id = $(this).attr('id');

    //the main ajax request
    $.ajax({
        type: "POST",
        data: "action=vote_up&id="+$(this).attr("id"),
        url: "ajax/votes.php",
        success: function(msg)
        {
            //echo the votes count
            $("span#votes_count"+the_id).html(msg);
            //replace the new vote count
            $("span#votes_count"+the_id).fadeIn();
            //replace the image with active arrow
            $("#vote_up"+the_id).attr("src", "img/upvoteActive.png");

        }
    });
});

html代码：

<li class ="record">
<span class="vote_count">$net_vote</span> 

  <a href='#' class='vote_up' id=$id><img src="img/uparrow.png"></a>

  <a href='#' class='vote_down' id=$id><img src="img/downarrow.png"></a>
</li>

再次澄清一切，ajax请求很好，它正确的答案，问题是在ajax的成功位，新的投票计数没有显示，并且图像没有被替换为活动箭头（就像堆栈overflower）谢谢：））

Answer 1

success回调中的选择器都是错误的。您有<span class="vote_count">...</span>，但随后尝试更新其值，就好像它有一个ID：$("span#votes_count"+the_id)...

您可能希望代码更像：

success: function(msg) {
  //echo the votes count
  $("span.vote_count#"+the_id).html(msg);
  //replace the new vote count
  $("span.vote_count#"+the_id).fadeIn();
  //replace the image with active arrow
  $(".vote_up#"+the_id).attr("src", "img/upvoteActive.png");
}

正如您所看到的，您还需要将对象的id添加到.vote_count元素中。

更新：

更清楚的是，这是更新的标记：

<span class="vote_count" id="$id">$net_vote</span> 
<a href='#' class='vote_up' id="$id"><img src="img/uparrow.png" /></a>
<a href='#' class='vote_down' id="$id"><img src="img/downarrow.png" /></a>

这是更新的javascript：

$(document).ready( function() {
  $("a.vote_up").click(function(){
    //get the id
    var the_id = $(this).attr('id');

    //the main ajax request
    $.ajax( {
      type: "POST",
      data: "action=vote_up&id=" + the_id,
      url: "ajax/votes.php",
      success: function( msg ) {
        $("span.vote_count#"+the_id).html(msg).fadeIn();
        $(".vote_up#" + the_id + " img").attr("src", "img/upvoteActive.png");
      }
    } );
  } );
} );

Answer 2

在您的jQuery代码中，您使用#votes_count，但html没有id但只有vote_count类（没有s ）。

所以它应该是span.vote_count

与upvote相同，你使用id来定位它，但它有一个类..

Answer 3

您错误地定位了跨度，并且还通过发布请求发送了get参数。我已修好如下：

 $(function(){
        $("a.vote_up").click(function(){
        //get the id
        the_id = $(this).attr('id');

    //the main ajax request
            $.ajax({
                type: "POST",
                data: {'action' : 'vote_up','id' : $(this).attr("id")} // here
                url: "ajax/votes.php",
                success: function(msg)
                {
                                    //echo the votes count
                    $("span.vote_count").html(msg); //here
                    //replace the new vote count
                    $("span.vote_count").fadeIn(); // here
                    //replace the image with active arrow
                               $(".vote_up").find(the_id).attr("src", "img/upvoteActive.png"); // and here

                }
            });
        });

像stackoverflow投票一样有jquery投票的问题？

3 个答案: