jQuery的投票有問題，就像stackoverflow投票？

Question

我有工作正常Ajax請求此jQuery代碼，但jQuery是不顯示結果（vote_count）和改變給予好評圖像，就像計算器：

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請求優良的upvoting正確的答案，問題是在阿賈克斯的成功位，新的計票結果沒有顯示，並且圖像不是b eing更換，以積極的箭頭（就像棧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

同樣與給予好評，你用一個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 

       } 
      }); 
     });