javascript - 类正在 while 循环中的所有结果下加载图像

Question

当我单击 while 循环生成的任何提交按钮时，提交按钮下方的加载图像将显示在 while 循环中的所有结果上。它实际上应该只显示在单击的按钮下方。我知道它的发生是因为我在这里使用了类。我认为我应该在这里使用唯一的 ID，以便结果仅显示在特定单击的按钮下方。但我不知道如何实现这一点。或者我应该在这里使用其他方法吗？请看一下。

<?php while($a = $stmt->fetch()){ extract($a); ?>
    <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" class="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

您需要在本地找到您的加载程序 看看

var $loader = $(this).parent().find('.loading-rent');

 $(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()
    };

    var $loader = $(this).parent().find('.loading-rent');

    $.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();
                        $loader.show();
                        $(".message").hide();
                    },
                    success: function (json) {
                        setTimeout(function () {
                            $(".message").html(json.status).fadeIn();
                            $("#submit").show();
                            $loader.hide();
                        }, 1000);
                    }
                });
            },
            cancel: function () {
                $.alert('<span style="font-size: 23px">Upgrade Cancelled!</span>');
            }
        }
    });
    return false;
});

});