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类。

首先，锚具有您要使用它的.close类。此外，bootstrap的模态包含.close类。因此，如果有不同的元素具有相同的类，则应该工作ELEMENT.CLASSNAME。

我希望这对你有用。

将数据传递给Bootstrap 4 Modal

1 个答案: