我正在使用 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">×</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 交给模态框并在下一步中删除图片吗?
谢谢!
最佳答案
您只需这样做:
$('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
。
我希望这对你有用。
关于javascript - 将数据传递给 Bootstrap 4 Modal,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/48166190/