jQuery：ajax內容加載錯誤div類

Question

我有一個jQuery投票腳本，它允許用戶對頁面上顯示的投票進行投票。在特定的頁面上顯示了很多民意調查（通過表單），jQuery以特定的形式抓取輸入的值，並將數據發送到query.php頁面。

這是一個樣本調查頁面的樣子：

QUESTION 1:<br /> 
<div class="poll_area"> 
    <div id="poll">  
     <form method="POST" action="" class="poll_query"> 
      <input type="hidden" value="favorites" name="page" /> 
      <input type="hidden" value="user1" name="to" /> 
      <input type="hidden" name="pid" value="1"/>        
      <input name="" type="radio" value="yes" /> Yes<br /> 
      <input name="" type="radio" value="no" /> No<br />       
     </form>  
    </div> 
    <div class="result"> </div> 
</div> 

QUESTION 2:<br /> 
<div class="poll_area"> 
    <div id="poll">  
     <form method="POST" action="" class="poll_query"> 
      <input type="hidden" value="favorites" name="page" /> 
      <input type="hidden" value="user2" name="to" /> 
      <input type="hidden" name="pid" value="2"/>        
      <input name="" type="radio" value="yes" /> Yes<br /> 
      <input name="" type="radio" value="no" /> No<br />       
     </form>  
    </div> 
    <div class="result"> </div> 
</div> 

這是jQuery的腳本我運行：

var ajax_load = "<img src='images/ajax-loader.gif' alt='loading...' />"; 
$("form.poll_query > input[type='radio']").click(function(e) { 
    e.preventDefault(); 
    var form= $(this).closest("form"); 
    var pid = $("input[name='pid']", form).val(); 
    var ans = $(this).val(); 
    var page = $("input[name='page']", form).val(); 
    var to = $("input[name='to']", form).val(); 

    $(this).closest("#poll").html(ajax_load); 
    $.post(
     "query.php?module=vote", 
     {answer: ans, pid: pid, to: to, page: page}, 
     function(responseText){ 
      $("#poll").hide(0,function() { 
       $(".result").html(responseText).fadeIn(1500); 
      }); 
     }, 
     "html" 
    ); 
}); 

當第一次民意測驗投票的一切正確呈現。返回的'responseText'顯示在它應該在的頁面中。但對於頁面上的每個後續輪詢，'ajax_load'都會正確加載它的位置，但'responseText'會加載到FIRST輪詢的.result類中。

這就是頁面最初的樣子：

Question 1? 
o YES 
o NO 

Question 2? 
o YES 
o NO 

如果問題2特定的用戶投票，這是頁面應該是什麼樣子：

Question 1? 
o YES 
o NO 

Question 2 
o YES : XXXXXXXXX 60% 
o NO : XXXXXX 40% 

這實際上是實際發生的事情（即使用戶在問題2上投票）：

Question 1? 
o YES : XXXXXXXXX 60% 
o NO : XXXXXX 40% 

Question 2 
o YES 
o NO 

但是，如果用戶在問題1上投票，結果是否正確裝入：

Question 1? 
o YES : XXXXXXXXX 60% 
o NO : XXXXXX 40% 

Question 2 
o YES 
o NO 

我試圖改變$(".result").html(responseText).fadeIn(1500);到$(this).closest(".result").html(responseText).fadeIn(1500);

但仍沒有運氣。

Answer 1

您有重複的元素ID爲poll。您應該使用類，然後使回調中的選擇器更加精確。您的登錄路線爲$(this).closest()。

你需要做這樣的事情：

var pollArea = $(this).closest(".poll_area"); 
$.post(... , function(responseText) { 
    pollArea.find(".poll").hide(0,function() { 
     pollArea.find(".result").html(responseText).fadeIn(1500); 
}); 

注意，.poll和.result選擇現在被包圍點擊單選按鈕.poll_area作用域。

Answer 2

我建議使用基於ID而不是類的元素。因此，將每個問題轉換爲一個帶有唯一ID的div

<div id="q1"> 
QUESTION 1:<br /> 
<div class="poll_area"> 
    <div id="poll">  
     <form method="POST" action="" class="poll_query"> 
      <input type="hidden" value="favorites" name="page" /> 
      <input type="hidden" value="user1" name="to" /> 
      <input type="hidden" name="pid" value="1"/>        
      <input name="" type="radio" value="yes" /> Yes<br /> 
      <input name="" type="radio" value="no" /> No<br />       
     </form>  
    </div> 
    <div class="result"> </div> 
</div> 

$（「＃q1 .result」）。html（'...'）;