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（'...'）;