0

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

1 回答 1

2

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

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

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

我认为应该这样做：（小提琴）

<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>
<? 
}
于 2012-10-04T23:31:58.440 回答