複数のポップアップコンテンツの指定方法

Question

前提

質問者は素人です。
専門用語の使い方が間違っている可能性があります。
何卒お許しください。

実現したいこと

imgをクリックするとmp4コンテンツをポップアップ表示するJsを作成しました。
htmlに対象のクラス(.popup)が１つであれば問題ありませんが、２つ以上になると最後のmp4コンテンツがポップアップされてしまいます。

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

エラーメッセージ

該当のソースコード

<div id="contents">
<div id="main">
<div id="mainInr">
<h1 class="head01">設備紹介</h1>
<div class="basicFlt">
<ul class="fltList clm3">
<li><p class="pink bold center size18">a</p> 
<img class="popupBtn" src="images/facility01.jpg" alt="" onmouseover="this.src='images/facility01_1.png'" onmouseout="this.src='images/facility01.jpg'">
  <div class="popup">
      <video playsinline muted autoplay src="images/facility01.mp4" loop class="popup-content"></video>
      <div class="btn-close">閉じる</div>
  </div>  
<p>説明文</p>
</li>
…
<li><p class="pink bold center size18">b</p>
<img class="popupBtn" src="images/facility10.jpg" alt="" onmouseover="this.src='images/facility10_1.png'" onmouseout="this.src='images/facility10.jpg'">
  <div class="popup">
    <video playsinline muted autoplay src="images/facility10.mp4" loop class="popup-content"></video>
    <div class="btn-close">閉じる</div>
  </div>  
<p>説明文</p>
</li>
</ul>
</div>

@charset "UTF-8";
/* CSS Document */

#mv {
    background: url(/about/images/mv.png) center top no-repeat !important;
}



.head01{
	overflow: hidden;
}

.head01 p.year{
	float: left;
	margin-left:40%;
	font-size: 1em !important;
}

.head01 p.day{
	float: right;
	margin-top: 20px;
	font-size: 12px;
}




@media only screen and (max-width: 750px) {
	
.head01 p.year{
	/* float: left; */
	font-size: 1em !important;
	margin-left:0px;
}

.head01 p.day{
	float: right;
	margin-top: 0px;
}	
	
	
}

/* 全体設定 */
* {
	box-sizing: border-box;
}

.popupBtn{
	cursor: pointer;
}

  /* ポップアップウインドウの設定 */
.popup {
	background-color: rgba(0,0,0,.7);
	display: none;
	position:fixed;
	top: 0;
	left: 0;
	/*right: 0;
	bottom: 0;
	margin: 0 auto;*/
	width: 100%;
	height: 100%;
	/*overflow-y: auto;*/
  }

.popup-content{
	/*background: #fff;
	padding: 30px;
	height: 80%;*/
	width: 80%;
	display: flex;
	justify-content: center;
	align-items: center;
}

.flex{
	display: flex;
	justify-content: center;
	align-items: center;
	flex-wrap: wrap;
}

  /* 閉じるボタン */
.btn-close{
	background: #000;
	border-radius: 10px;
	color: #E7656D;
	padding: 10px;
	margin: 10px;
	width: 80%;
	text-align: center;
	cursor: pointer;
}

  
  @media only screen and (max-width: 750px){
	  video {	max-width: 100%; }
}

$(document).on("click", ".popupBtn", function() {//$("要素").click だとjsを読み込んだ時点で"要素"が存在しない為NG
  $(".popup")
    .addClass("flex")
});
  
$(document).on("click", ".btn-close", function() {
  $(".popup")
  .removeClass("flex")
  //.fadeOut();
});

試したこと

$(".popup")ではpopupBtnと同じ要素内の.popupと指定できていない事が原因と考えてみましたが上手くいきませんでした。
何卒よろしくお願い致します。

$(document).on("click", ".popupBtn", function(getElementByclass) {//$("要素").click だとjsを読み込んだ時点で"要素"が存在しない為NG
  let pop = $(".popupBtn").children(".popup");
  //$(".popup")
    pop.addClass("flex")
});

Answer 1

こんな感じで

<style>
.popup:not(.flex){
display:none;
}
</style>
<script>
$(function(){
  $(document).on("click", ".popupBtn", function() {
    $(this).next(".popup").addClass("flex");
  });
  $(document).on("click", ".popup.flex", function() {
    $(this).removeClass("flex");
  });
});
</script>
  <ul class="fltList clm3">
<li>
<span class="popupBtn" >ボタン1</span>
<div class="popup">
ポップアップ1
</div>  
</li>
<li>
<span class="popupBtn" >ボタン2</span>
<div class="popup">
ポップアップ2
</div>  
</li>
</ul>

Comments

[yambejp]

IEを排除できるようになった現在、ポップアップはdialogタグが最有力だと思います

[t-o]

回答ありがとうございます。
js以外にもソースコードを提示いただきありがとうございます。
参考にさせて頂き実装することができました。

Answer 2

let pop = $(".popupBtn").children(".popup");

惜しいです。このコードは.popupBtn の子供の.popup を参照しようとしていますが、HTMLを見るとそれらは兄弟関係であって親子関係ではありません。
また、$(".popupBtn") と書くと押されたボタンに関係なく「すべての popupBtn」という意味になります。押された要素を参照するには this を使いましょう。

$(this).parent().children(".popup").addClass("flex")

---

  $(".popup")
  .removeClass("flex")

こちらも同様です。this を基準に対象を探しましょう。$(this).closest(".popup")

Comments

[t-o]

丁寧な解説までつけて頂き、ありがとうございます。
大変わかりやすく勉強になりました。

Answer 3

.popupは.popupBtnの子要素ではなく兄弟要素ですよね・・・？
でしたら、.children()ではなく.next()で取得できるのではないかと思います。

Comments

[t-o]

回答ありがとうございます。
次に来る要素を.nextで取得できることを知りませんでした。
勉強になりました。