Question

我有一个使用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>
<? 
}

Answer 1

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

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

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

我认为应该这样做：（FIDDLE）

<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>
<? 
}

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

1 个答案: