javascript - 在 AJAX 成功的引导模式中确认后隐藏卡片

Question

我的删除页面包含多个带有删除按钮的帖子，按下删除按钮时 bootstrap bootstrap 模式将打开并要求确认您确定要删除帖子吗？是:否

当按下YES按钮时.click(function (e){....}发送AJAX请求到数据库，如果ajax返回成功，表明应隐藏特定卡片

所以我尝试使用以下代码

    $(document).ready(function () {
            $("#confirm").click(function (e) {

                e.preventDefault();
                var that = this;

                const act = $(this).attr('data-act');
                const para = $(this).attr('data-para');
                const hash = $(this).attr('data-hash');
                $.ajax({
                    url: '/include/ajax/mark_sold.php', // Call delete.php to update the database
                    method: 'POST',
                    data: {action: act, para: para, hash: hash},
                    cache: false,
                    success: function (data, status) {
                        $("#fetched").html(data);
                        $('#myModal').modal('hide');
                         $(that).closest('div.card').hide();  //to hide div after ajax success
                    },
                    error: function (xhr, statusText, error) {
                        $("#fetched").show();
                        $("#confirmButton").hide();
                    }
                });
            });
            return false;
        });

HTML

<div class="card border-0 small col-lg-3 col-md-2 col-6 mb-2 px-1">
  <img class="card-img-top rounded-0" src="/upload/" alt="Card image cap">
<div class="card-body pb-0 pt-2 px-0">
    <h6 class="card-title text-dark text-truncate">title</h6>
</div>

<button data-toggle="modal" data-target="#myModal" class="btn btn-primary btn-block btn-sm modalopen"    data-hash="6d8ce77d206011027297b693be999704" data-para="A4IxzuRP8ATv">delete</button>
</div>

How do i hide card after confirming in modal

Answer 1

您代码中的问题是，您的变量 "that" 不是指删除按钮，而是指对话框的确认按钮，因此您不能使用 closest () 函数。此时，您应该为您的卡/删除按钮使用一些特定的标识。例如:

$('button[data-hash="'+hash+'"]') .closest('div.card').hide();

我在代码中没有看到的另一点是将数据变量(act、para、hash)传输到对话框确认按钮。例如，您的代码 $(this).attr('data-hash') 无法从删除按钮获取值，因为 $(this) 引用对话框确认按钮。此问题的解决方案是将唯一标识符传递给对话框按钮。

$(".deleteBtn").on('click',function(){ //Add on click event to all delete buttons
    $("#confirm").data("hash",$(this).data("hash")); //Pass hash value to dialog confirm button
});

$("#confirm").click(function (e) {
    e.preventDefault();

    var delBtn = $('button[data-hash="'+$(this).data("hash")+'"]'); //Get specific delete button element by passed hash value

    const act = delBtn.attr('data-act'); //Get data variables from the delete button element
    const para = delBtn.attr('data-para');
    const hash = $(this).data("hash");
    $.ajax({
        url: '/include/ajax/mark_sold.php',
        method: 'POST',
        data: {action: act, para: para, hash: hash},
        cache: false,
        success: function (data, status) {
            $("#fetched").html(data);
            $('#myModal').modal('hide');
            delBtn.closest('div.card').hide();  //Find closest .card element to the specified delete button
        },
        error: function (xhr, statusText, error) {
            $("#fetched").show();
            $("#confirmButton").hide();
        }
    });
});

不要忘记将 .deleteBtn 类添加到删除按钮。

希望有帮助。