Question

我有一个来自while循环。我用ajax处理它。它仅在第一个起作用而不在其他结果上起作用。请看看。

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

当我点击第一个结果的提交按钮时，它会处理结果。但是当我点击其他按钮时，它只是刷新页面。我尝试用CLASS替换所有ID，但之后甚至没有第一个ID正在工作。请帮帮我。

脚本

$(document).ready(function() {
    $(".submit").click(function() {
        var dataString = {
            memid: $(".memid").val(),
            validity: $(".validity").val()
        };
        $.confirm({
        title: 'Confirm!',
        content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?',
        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

当@Alive to Die和Jeff试图解释它时，你使用了返回多个对象的selector，所以当你在这组对象上使用一个函数时，jquery只使用这个集合的第一个对象。

你必须使用＆＃34;这个＆＃34;研究背景：

$(".submit").click(function(e) {
    e.preventDefault();
    // $(this) : your input with class .submit (the one you click)
    // parent() : the parent of $(this) (the form)
    // and then find the child with the unique class you want
    var dataString = {
        memid: $(this).parent().find(".memid").val(),
        validity: $(this).parent().find(".validity").val()
    };
    // EDIT: Get the loading image (you should use a class instead of this selector)
    var loader = $(this).parent().find("> div");
    // After you can use loader in this function and all sub functions
    loader.hide();
    // And then the rest of your code with the same logic...
});

注意每个函数都有一个与其执行上下文链接的不同$（this）。

Answer 2

单击preventDefault()按钮时，使用submit可防止页面刷新。使用this获取当前表单的值。将您的dataString更改为使用this以获取当前表单的值。

$(document).ready(function() {
$(".submit").click(function(e) {
    e.preventDefault();
    var dataString = {
        memid: $(this).parent().find(".memid").val(),
        validity: $(this).parent().find(".validity").val()
    };
    $.confirm({
    title: 'Confirm!',
    content: 'Are you sure you want to upgrade your membership to <?php echo $mbs_name; ?>?',
    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;
    });
});

在内部形成while循环仅处理第一个结果

2 个答案: