javascript - 将数据传递给 Bootstrap 4 Modal

Question

我正在使用 PHP 脚本从数据库中读取数据，并使用 Bootstrap Cards 根据结果创建图片库。现在我希望有可能从图库中删除数据。我终于找到了一种方法来做到这一点 -

PHP代码:

[...]
echo "<div class='col-sm-4'>";
echo "<div class='card-deck'>";
echo "<div class='card' id='id_".$uploads[$i]['id']."'>";
echo "<img class='card-img-top' src='".$imagePath.$uploads[$i]['md5']."_tn.jpg' alt='Card image cap'>";
echo "<div class='card-img-overlay'><a class='close' href='#'>×</a></div>";
echo "<div class='card-body'>";
[...]

Javascript:

$(document).ready(function(){
    $('.close').click(function(){
        var target = $(this).parent().parent().attr('id');
        $.ajax({url:'delete.php?id=' + target.replace('id_', '')});
        location.reload();
    });
});

这工作得很好，但我想在实际从图库中删除图片之前包含一个 Bootstrap Modal。

HTML 模式代码:

<div class="modal fade" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
  <div class="modal-dialog modal-dialog-centered" role="document">
    <div class="modal-content">
      <div class="modal-header">
        <h5 class="modal-title" id="exampleModalLabel">Delete picture</h5>
        <button type="button" class="close" data-dismiss="modal" aria-label="Close">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">Do you really want to delete this picture?</div>
      <div class="modal-footer">
        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        <button type="button" id="deletePic" class="btn btn-danger">Delete Picture</button>
      </div>
    </div>
  </div>
</div>

PHP代码:

[...]
echo "<div class='col-sm-4'>";
echo "<div class='card-deck'>";
echo "<div class='card' id='id_".$uploads[$i]['id']."'>";
echo "<img class='card-img-top' src='".$imagePath.$uploads[$i]['md5']."_tn.jpg' alt='Card image cap'>";
echo "<div class='card-img-overlay'><a class='close' data-toggle='modal' data-target='#deleteModal' href='#'>×</a></div>";
echo "<div class='card-body'>";
[...]

由于模式现在是单击 X 按钮和实际删除之间的附加步骤，因此我的 Javascript 将不再起作用。有人可以告诉我如何将图片 ID 交给模态框并在下一步中删除图片吗？

谢谢!

Answer 1

您只需这样做:

$('a.close').click(function(){
    var target = $(this).parent().parent().attr('id');
    var pictureId = target.replace('id_', '');

    $("#deletePic").data('picture-id', pictureId);

    $("#deleteModal").modal("show");
});

上面的代码，我们改变了一些东西。首先，我们删除了 ajax 请求。之后，我们将图片 ID 分配给模态中的删除按钮。之后，我们打开了#deleteModal

现在，我们知道 #deletePic 有图片的 ID 号。

如果我们想在点击#deletePic按钮时删除图片，我们应该使用这个:

$("#deletePic").on("click", function() {
    var pictureId = $(this).data('picture-id');

    $.ajax({url:'delete.php?id=' + pictureId});
});

你不应该错过，有两个 .close 类。

首先 anchor 有 .close 类，你想使用它。此外， Bootstrap 的模式包含 .close 类。因此，如果不同的元素具有相同的类，您应该使用 ELEMENT.CLASSNAME。

我希望这对你有用。