用户gururaj 3年前问过类似的问题，我用自己的答案作为一个例子，但似乎并不奏效。
我想在Bootstrap中的模态之间有一个上一个和下一个按钮。它使用上一个和下一个按钮加载第一个图像，但是一旦单击下一个按钮，模态就会消失，而下一个模态不会出现。
我认为脚本找不到下一个div标签？这是一个小玩意儿： https://jsfiddle.net/sonjavdb/Lknu21cj/3/
或者，这是HTML：
<div class="container">
<div class="row">
<div class="col-md-1"> </div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal1">
<div class="modal fade" id="myModal1">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal2">
<div class="modal" id="myModal2">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
<button type="button" class="btn btn-default btn-prev">Prev</button>
<button type="button" class="btn btn-default btn-next">Next</button>
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2 end">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal3">
<div class="modal" id="myModal3">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal4">
<div class="modal" id="myModal4">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal5">
<div class="modal" id="myModal5">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1"> </div>
</div><!--12-->
<div class="row">
<div class="col-md-1"> </div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal6">
<div class="modal" id="myModal6">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal7">
<div class="modal" id="myModal7">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal8">
<div class="modal" id="myModal8">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal9">
<div class="modal" id="myModal9">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-2">
<img src="https://via.placeholder.com/150" data-toggle="modal" data-target="#myModal10">
<div class="modal" id="myModal10">
<div class="modal-dialog">
<div class="modal-content">
<!-- Modal Header -->
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
</div>
<!-- Modal body -->
<div class="modal-body">
<img src="https://via.placeholder.com/300" class="img-fluid">
</div>
<!-- Modal footer -->
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
<div class="col-md-1"> </div>
</div> <!--12-->
</div>
还有JS：
$("div[id^='myModal']").each(function(){
var currentModal = $(this);
//click next
currentModal.find('.btn-next').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").nextAll("div[id^='myModal']").first().modal('show');
});
//click prev
currentModal.find('.btn-prev').click(function(){
currentModal.modal('hide');
currentModal.closest("div[id^='myModal']").prevAll("div[id^='myModal']").first().modal('show');
});
});
有什么想法为什么不起作用？