影响循环中所有实例的jquery按钮

我有一个表单，它使用jquery/Ajax更新我的数据库，而无需刷新。 jquery在提交时淡出单选选项，然后显示另一个按钮，以防用户想要更改其选择

我的问题是，一旦用户提交了他们的决定，如果他们单击“改变主意”按钮，jquery就会返回下面所有实例的无线电

“改变你的想法”按钮怎么能只为那个实例带回收音机？ 对于复杂的场景和大量的代码，我深表歉意。如果你需要更多的信息或解释，尽管问吧

谢谢

<? $result = $mysqli->query("SELECT * FROM items WHERE Job='$job'") or die(mysqli_error($mysqli));
while( $row = $result->fetch_assoc() ){ ?>
        <div class='tile'>

            <script type="text/javascript">
                $('document').ready(function(){
                    $('#form<?= $row['Id'] ?>').ajaxForm({
                        target: '#preview<?= $row['Id'] ?>',
                        success: function() {
                            $('#formbox<?= $row['Id'] ?>').fadeOut('slow'),
                            $('#preview<?= $row['Id'] ?>').fadeIn('slow');
                            $("button").click(function () {
                                $("#preview<?= $row['Id'] ?>").fadeOut("slow"),
                                $("#formbox<?= $row['Id'] ?>").fadeIn("slow");});
                        }
                    });
                });
            </script> 

            <div class='details'>
                <div id='radios' style='position:relative; height:25px;'>
                    <div id="preview<?= $row['Id'] ?>" style="width:258px; margin-left:-129px; left:50%; display:none; position:absolute;">
                        <button>Way to go! Click here to change your mind.</button>
                    </div>
                    <div id="formbox<?= $row['Id'] ?>" style='position:absolute;'> 
                    <form name='' id='form<?= $row['Id'] ?>' action='js/submit.php' method='post'>
                        <label>Keep:</label><input type='radio' name='dec[]' value='keep' <? if($row['Dec1']=='keep'){echo "checked='checked'";} ?> >
                        <label>Donate:</label><input type='radio' name='dec[]' value='donate' <? if($row['Dec1']=='donate'){echo "checked='checked'";} ?> >
                        <label>Sell:</label><input type='radio' name='dec[]' value='sell' <? if($row['Dec1']=='sell'){echo "checked='checked'";} ?> >
                        <label>Trash:</label><input type='radio' name='dec[]' value='trash' <? if($row['Dec1']=='trash'){echo "checked='checked'";} ?> >
                        <label>Give To:</label><input type='text' name='dec[]' size='15' <? if($row['Dec1']!='keep' && $row['Dec1']!='donate' && $row['Dec1']!='sell' && $row['Dec1']!='trash'){echo "value='".$row['Dec1']."'";} ?> >
                        <input type='hidden' name='id' value='<?= $row['Id'] ?>' />
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
<? 
} 

---

问题在于，每次提交表单时，都会将单击处理程序添加到该组收音机中淡出的所有按钮中。当您提交不同的表单时，您永远不会删除以前的处理程序，因此它会再次将它们全部淡入

您应该将
.ajaxForm（）
绑定到一个类，而不是使用大量不同的处理程序，在每个处理程序中替换
$row['Id']
。它应该使用
$（this）
和DOM遍历函数来操作您单击的表单

另外，我认为这与问题无关，但是您的
id='radios'
没有附加行id，因此您正在为这些元素创建重复的id

我认为这应该做到：（）


$（'document'）.ready（函数（）{
$（'.form'）.ajaxForm({
成功：函数（responseText、statusText、xhr、elem）{
变量formbox=元素最近（'.formbox'）；
formbox.fadeOut（“慢”）；
formbox.slow（“.preview”）.fadeIn（'slow'）；
}
});
$（“按钮”）。单击（函数（）{
var preview=$（this）.closest（“.preview”）；
预览。淡出（“慢”）；
预览。兄弟姐妹（“.formbox”）.fadeIn（“慢”）；
});
});​
嗯…我已经应用了你的代码，但是.formbox不会在提交时消失。查询运行正常，但我没有使“.formbox”淡出，.preview”淡入。有什么想法吗？仅供参考：我正在使用以下插件提交表单：：以防您认为它可能会影响jquery。我不相信是这样，但你可能会有不同的看法。是的，我从
.ajaxForm
中发现了这一点。文档中说回调的第四个参数应该是form元素，所以我认为
$（'.CLASSNAME'，elem）
应该找到这些元素并淡出它们。也许应该是
$（'.CLASSNAME'，$（elem））
？我更改了.formbox和.preview的'elem'语法-仍然不走运。是否将responseText放在DIV中？您是否尝试过在Firebug/Dev Toosls中的回调函数中设置断点？
<script type="text/javascript">
$('document').ready(function() {
    $('.form').ajaxForm({
        success: function(responseText, statusText, xhr, elem) {
            var formbox = elem.closest('.formbox');
            formbox.fadeOut('slow');
            formbox.siblings(".preview").fadeIn('slow');
        }
    });
    $("button").click(function() {
        var preview = $(this).closest(".preview");
        preview.fadeOut("slow");
        preview.siblings(".formbox").fadeIn("slow");
    });
});​
</script> 

<? $result = $mysqli->query("SELECT * FROM items WHERE Job='$job'") or die(mysqli_error($mysqli));
while( $row = $result->fetch_assoc() ){ ?>
        <div class='tile'>
            <div class='details'>
                <div class='radios' style='position:relative; height:25px;'>
                    <div class="preview" style="width:258px; margin-left:-129px; left:50%; display:none; position:absolute;">
                        <button>Way to go! Click here to change your mind.</button>
                    </div>
                    <div class="formbox" style='position:absolute;'> 
                    <form name='' class='form' action='js/submit.php' method='post'>
                        <label>Keep:</label><input type='radio' name='dec[]' value='keep' <? if($row['Dec1']=='keep'){echo "checked='checked'";} ?> >
                        <label>Donate:</label><input type='radio' name='dec[]' value='donate' <? if($row['Dec1']=='donate'){echo "checked='checked'";} ?> >
                        <label>Sell:</label><input type='radio' name='dec[]' value='sell' <? if($row['Dec1']=='sell'){echo "checked='checked'";} ?> >
                        <label>Trash:</label><input type='radio' name='dec[]' value='trash' <? if($row['Dec1']=='trash'){echo "checked='checked'";} ?> >
                        <label>Give To:</label><input type='text' name='dec[]' size='15' <? if($row['Dec1']!='keep' && $row['Dec1']!='donate' && $row['Dec1']!='sell' && $row['Dec1']!='trash'){echo "value='".$row['Dec1']."'";} ?> >
                        <input type='hidden' name='id' value='<?= $row['Id'] ?>' />
                        <input type="submit" value="Submit">
                    </form>
                </div>
            </div>
        </div>
    </div>
<? 
}