Jqueryモーダルウィンドウ ”次へ”、”戻る”ボタンが機能しない。

前提・実現したいこと

こんにちは。
Jqueryでモーダルウィンドウを作り、その中で”次へ”や”戻る”ボタンを配置して、
次や前のモーダルウィンドウに遷移表示させたいです。

ある程度はできましたが、”次へ”、”戻る”ボタンが機能しません。

サンプルはこれです。
http://taihei-y.net/

発生している問題・エラーメッセージ

エラーメッセージ

該当のソースコード

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title></title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
</head>

<body>
<div class="container">
<div class="col-lg-3"  style="display: inline-block">
  <a class="js-modal-open" href="" data-target="modal01"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220"/></a>
　　<div id="modal01" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
         <a class="js-modal-open" href="" data-target="modal01">
		 <video src="sampl-01.mp4"controls width="100%" height="auto"></video>
		 </a>
		 <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●</p>
		 <a href="" class="back">戻る</a><a href="" class="next">次へ</a>
            <a class="js-modal-close" href="">閉じる</a>
        </div><!--modal__inner-->
    </div><!--modal--><h4><strong>●●●●●●●●</strong></h4>
    <p>●●●●●●●●●●●●</p>
</div>

<div class="col-lg-3"  style="display: inline-block">
  <a class="js-modal-open" href="" data-target="modal02"><img src="img/damiy_movie_img.jpg" alt="" width="270" height="220" /></a>
　　<div id="modal02" class="modal js-modal">
        <div class="modal__bg js-modal-close"></div>
        <div class="modal__content">
         <a class="js-modal-open" href="" data-target="modal02">
		 <video src="sampl-01.mp4"controls width="100%" height="auto"></video>
		 </a>
		 <h4>●●●●●●●●</h4><p>●●●●●●●●●●●●●●●●●●●●</p>
		 <a href="" class="back">戻る</a><a href="" class="next">次へ</a>
            <a class="js-modal-close" href="">閉じる</a>
        </div><!--modal__inner-->
    </div><!--modal--><h4><strong>●●●●●●●●</strong></h4>
    <p>●●●●●●●●●●●●●●●●●●●●●●●●</p>
</div>

</div>
</body>
</html>

<style>
.content{ margin: 0 auto;padding: 40px;}
	
.modal{display: none;height: 100vh;position: fixed;top: 0;width: 100%;}
	
.modal__bg{ background: rgba(0,0,0,0.8); height: 100vh;position: absolute;width: 100%;}
	
.modal__content{ background: #fff;left: 50%;padding: 40px; position: absolute;top: 50%;transform: translate(-50%,-50%);width: 60%;}

.back{margin: 10px;cursor: pointer;}

.next{margin: 10px;cursor: pointer;}
	
</style>

<script>
	 $(function(){
    $('.js-modal-open').each(function(){
        $(this).on('click',function(){
            var target = $(this).data('target');
            var modal = document.getElementById(target);
            $(modal).fadeIn();
            return false;
        });
    });
    $('.js-modal-close').on('click',function(){
        $('.js-modal').fadeOut();
        return false;
    }); 
	$('.next').click(function () {
            $(this).parent().parent().fadeOut();
            $(this).parent().parent().next().fadeIn(500);
		return false;
        });
        $('.back').click(function () {
            $(this).parent().parent().fadeOut();
            $(this).parent().parent().prev().fadeIn(500);
			return false;
        });
});
</script>

試したこと

ここに問題に対して試したことを記載してください。

補足情報（FW/ツールのバージョンなど）

ソースコードが多すぎて申し訳ございません。どなたお分かりになりますでしょうか？

m.ts10806

2021/01/08 05:17

コードやエラーはマークダウンのcode機能を利用してご提示ください。 https://teratail.com/questions/238564

行動規範の内容に同意します

回答1件

もっとちゃんとしたらモーダルライブラリ使ったほうがよいかもしれませんが
とりあえず今のHTMLの構造を見る限りこんな感じ

  $('.next').click(function () {
    $(this).closest('.modal').fadeOut().closest('.col-lg-3').next().find('.js-modal-open').trigger('click');;
    return false;
  });
  $('.back').click(function () {
    $(this).closest('.modal').fadeOut().closest('.col-lg-3').prev().find('.js-modal-open').trigger('click');;
    return false;
  });

投稿2021/01/08 08:21