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

您有poll的重复元素ID。您应该使用类，然后使回调中的选择器更精确。您使用$(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（'...'）;

jQuery：ajax内容正在加载错误的div类

2 个答案: