Question

无论从哪个按钮点击哪个结果，在while循环中显示正在第一个结果按钮下方显示的图像。例如，如果我在第一个结果上单击“提交”按钮，则会在其下方显示加载图像。没关系。但是，当我点击除第一个结果之外的任何其他结果的提交按钮时，加载图像仅显示在第一个结果下方，而不是在该特定结果的提交按钮下方。

<?php while($a = $stmt->fetch()){ ?>
    <form method="post" action="">
        <input type="hidden" value="<?php echo $mbs_id; ?>" class="memid">
        <select class="validity" class="upgrade-valsel">
            <?php while($mv = $mval->fetch()){ extract($mv); ?>
                <option value="<?php echo $mv_id; ?>"><?php echo $mv_validity; if($mv_validity == 1){ echo " month"; }else{ echo " months"; } ?></option>
            <?php } ?>
        </select>
        <input type="submit" value="Upgrade" class="submit">
        <div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div>
    </form>
<?php } ?>

脚本

$(document).ready(function() {
    $(".submit").click(function () {
        var dataString = {
            memid: $(this).parent().find(".memid").val(),
            memname: $(this).parent().find(".memname").val(),
            validity: $(this).parent().find(".validity").val()
        };
        $.confirm({
            title: 'Confirm!',
            content: 'Are you sure you want to upgrade your membership to ' + dataString.memname + '?',
            buttons: {
                confirm: function () {
                    $.ajax({
                        type: "POST",
                        dataType: "json",
                        url: "upgrade-process.php",
                        data: dataString,
                        cache: true,
                        beforeSend: function () {
                            $("#submit").hide();
                            $("#loading-rent").show();
                            $(".message").hide();
                        },
                        success: function (json) {
                            setTimeout(function () {
                                $(".message").html(json.status).fadeIn();
                                $("#submit").show();
                                $("#loading-rent").hide();
                            }, 1000);
                        }
                    });
                },
                cancel: function () {
                    $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
                }
            }
        });
        return false;
    });
});

Answer 1

在生成带循环的多个元素时使用.classes。

将#id用于唯一元素。

要修复您的代码，请执行以下操作：

添加并修复任何缺失的课程
使用类
使用事件委派来侦听任何提交按钮上的点击事件。阅读以下内容：jQuery API Docs on event delegation

Answer 2

在以下行中，您为加载图片设置了id标记;这对于while循环的每次迭代都必须是唯一的，否则你会遇到像你一样经历的问题。使用唯一ID和/或使用javascript选择要显示的最近加载图像。

<div class="center-align" style="margin-left: -20px"><img src="images/loading.gif" width="auto" id="loading-rent" style="margin-right: 0px; height: 40px"></div>

加载图像仅显示在while循环的第1个结果中

2 个答案: