実現したい事

こちらの記事を参考に、モーダル（ポップアップ）を実装したいと考えています。

スタッフ一覧ページ内で、1ページに複数人の顔写真があり、顔写真をクリックするとその人のプロフィールがモーダルで表示されるというものを考えています。

ただ、一つのページ内にただ複数個作成した場合、動作しませんでした。おそらく、一つ一つ別々のidを使用しなくてはいけないのかなというところまで考えましたが、どうしてもうまく動きませんでした。

ソースコード

php
1
2$staffs_info = [
3  ["key" => "1",
4   "image" => "/hogehoge/hogehoge.png",
5   ・
6   ・
7  ],
8  ["key" => "2",
9   "image" => "/hogehoge/hugahuga.png",
10   ・
11   ・
12  ],
13   ・
14   ・
15   ・
16];
17 
18
19
20  foreach($staffs_info as $staff_info){
21    $js_popup_key = "popup-" . $staff_info['key'];
22    $js_show_popup_key = "show-popup-" . $staff_info['key'];
23    $js_black_bg_key = "black-bg-" . $staff_info['key'];
24    $js_close_btn_key = "close_btn-" . $staff_info['key'];
25
26    $staff_content .= <<<HTML
27
28    <div class="popup" id="$js_popup_key">
29      <div class="popup-inner">
30        <div class="$js_close_btn_key" id="js_close_btn_key"><i class="fas fa-times"></i></div>
31        <div class="bPopupjs_popup_item_image">
32          <image width="100%" src="$staff_info[image]"><br>
33        </div>
34      </div>
35      <div class="black-background" id="$js_black_bg_key"></div>
36    </div>
37
38
39    <div id="$js_show_popup_key">      <image width="100%" src="$staff_info[image]"><br>
40      <strong style="font-size:22px;">$staff_info[name]</strong><br>
41      $staff_info[career]
42    </div>
43HTML;
44
45    $staff_js .= <<< JS
46function popupImage() {
47  var popup = document.getElementById('$js_popup_key');
48  if(!popup) return;
49
50  var blackBg = document.getElementById('$js_black_bg_key');
51  var closeBtn = document.getElementById('js_close_btn_key');
52  var showBtn = document.getElementById('$js_show_popup_key');
53
54  closePopUp(blackBg);
55  closePopUp(closeBtn);
56  closePopUp(showBtn);
57  function closePopUp(elem) {
58    if(!elem) return;
59    elem.addEventListener('click', function() {
60      popup.classList.toggle('is-show');
61    });
62  }
63}
64popupImage();
65JS;
66  }
67
68  return <<< HTML
69  $staff_intro
70  <div class="hogehoge">
71    $staff_content
72  </div>
73  <script type="text/javascript">
74    $staff_js
75  </script>
76HTML;

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

回答1件

ベストアンサー

こんにちは、
PHPはよく知りませんが、
foreachで回しているところで、全部がpopupImage()になっていると思いますので、HTMLのエレメントにid（$js_popup_keyのような）を付けるようにpopupImage_1(),popupImage_2(),popupImage_3()という名前にしてやる必要がある気がします。

投稿2020/06/01 10:46