Пользователь 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');
});
});
Любые идеи, почему этоне работает?