投稿2024/05/06 21:04
編集2024/05/09 01:10多人数チャット機能を作成しているのですが、チャットを立てた側が悪徳ユーザーだったりもう参加しないユーザーの強制退室を行えるような機能を考えています。
そこで複数の値を取得してループ文で回して、ユーザー名をクリックするとモーダルが開いてモーダルにもクリックしたユーザーの情報が送られるようにしたいです。
現状はモーダルを開くとこまでは出来ているのですが、クリックしたユーザーの情報をモーダルに渡したいのですが、現状はどのユーザーをクリックしても最後に取得した参加者の情報が送られてきてしまいます。
ユーザー名をクリックしてモーダルが開かれても配列の最後のユーザーの情報しか表示されない。
room/show
1<div class="room-enterning"> 2 @if($room->user_id == $user->id) 3 <div class="acbox room-enterning-content"><input id="ac" type="checkbox" /> 4 <label for="ac">参加者</label> 5 @foreach($myRoomMembers as $myRoomMember) 6 <div class="acbox-under room-enterning-list"> 7 <h5><a href="#modal-{{ $myRoomMember->id }}" class="modal-button" > 8 {{ $myRoomMember->user->name }} 9 </a></h5> 10 </div> 11 @endforeach 12 </div> 13 @endif 14 </div> 15 16 {{-- モーダル内容 --}} 17<div class="modal-wrapper" id="modal-{{ $myRoomMember->id }}"> 18 <a href="#!" class="modal-overlay"></a> 19 <div class="modal-window"> 20 <div class="modal-content"> 21 <p class="modal_title">{{ $myRoomMember->user->name }}</p> 22 <form method="POST" action="{{ route('member.destroy', $myRoomMember->id) }}"> 23 @csrf 24 @method('DELETE') 25 <input type="hidden" id="user_id" name="user_id" value="{{$myRoomMember->id}}"> 26 <div class="flex items-center justify-end mt-4"> 27 <x-danger-button class="ms-4" onClick='return myMemberDeleteAlert();'> 28 {{ $myRoomMember->user->name }}を強制退室 29 </x-danger-button> 30 </div> 31 </form> 32 </div> 33 <a href="#!" class="modal-close"><i class="far fa-times-circle"></i></a> 34 </div> 35</div>
room.css
1/*モーダル表示*/ 2.modal-wrapper { 3 z-index: 999; 4 position: fixed; 5 top: 0; 6 right: 0; 7 bottom: 0; 8 left: 0; 9 padding: 40px 10px; 10 text-align: center; 11} 12 13.modal-button { 14 font-weight: bold; 15 text-align: center; 16 cursor :pointer; 17 transition: all 0.3s; 18 display: block; 19 max-width:300px; 20 text-decoration: none; 21} 22 23.modal-button:active { 24 /*ボタンを押したとき*/ 25 -webkit-transform: translateY(2px); 26 transform: translateY(2px);/*下に動く*/ 27 28} 29 30 31/*ラベルホバー時*/ 32.modal-button:hover { 33 color: #FFFFFF; 34 background-color: #DDDDDD; 35 box-shadow: 0 15px 30px -5px rgba(0,0,0,.15), 0 0 5px rgba(0,0,0,.1); 36 transform: translateY(-4px); 37} 38 39.modal-wrapper:not(:target) { 40 opacity: 0; 41 visibility: hidden; 42 transition: opacity .3s, visibility .3s; 43} 44 45.modal-wrapper:target { 46 opacity: 1; 47 visibility: visible; 48 transition: opacity .4s, visibility .4s; 49} 50 51.modal-wrapper::after { 52 display: inline-block; 53 height: 100%; 54 margin-left: -.05em; 55 vertical-align: middle; 56 content: "" 57} 58 59.modal-wrapper .modal-window { 60 box-sizing: border-box; 61 display: inline-block; 62 z-index: 20; 63 position: relative; 64 width: 70%; 65 max-width: 600px; 66 padding: 10px 30px 25px; 67 border-radius: 2px; 68 background: #fff; 69 box-shadow: 0 0 30px rgba(0, 0, 0, .6); 70 vertical-align: middle 71} 72 73.modal-wrapper .modal-window .modal-content { 74 max-height: 80vh; 75 overflow-y: auto; 76 text-align: left 77} 78 79.modal_title { 80 font-size: 1.5em; 81 position: relative; 82 overflow: hidden; 83 padding: 0; 84} 85 86.modal_title::before, 87.modal_title::after{ 88 content: ""; 89 position: absolute; 90 bottom: 0; 91} 92 93/* h2 プライマリカラー*/ 94.modal_title:before{ 95 border-bottom: 4px solid #6bb6ff; 96 width: 100%; 97} 98/* h2 セカンダリカラー*/ 99.modal_title:after{ 100 border-bottom: 4px solid #c8e4ff; 101 width: 100%; 102} 103 104.modal-content p { 105 margin: 10px 0 0 0; 106} 107 108.modal-overlay { 109 z-index: 10; 110 position: absolute; 111 top: 0; 112 right: 0; 113 bottom: 0; 114 left: 0; 115 background: rgba(0, 0, 0, .8) 116} 117 118.modal-wrapper .modal-close { 119 z-index: 20; 120 position: absolute; 121 top: 5px; 122 right: 5px; 123 width: 35px; 124 color: #95979c !important; 125 font-size: 30px; 126 font-weight: 700; 127 line-height: 35px; 128 text-align: center; 129 text-decoration: none; 130 text-indent: 0 131} 132 133.modal-wrapper .modal-close:hover { 134 color: #2b2e38 !important 135}
room.js
1const a = document.querySelector("#electric-cars"); 2// 次のようにしても動作します。 3// const a = document.getElementById("electric-cars") 4 5a.dataset.columns; 6a.dataset.indexNumber; 7a.dataset.parent;
ループ文内に記入したりをしたのですが、クリック後に画面が真っ暗になるだけでモーダルが表示されませんでした。
ループ文の中にモーダル内容を入れるとクリックしたユーザーの情報を送れますか？
!追記!
#modal-01の01の箇所を{{ $myRoomMember->user->id }}や{{ $myRoomMember->id }}に変えたのですが、最後に取得したデータしかモーダルが開きませんでした。
PHP8
Laravel10
回答2件
0
自己解決
解決しました。
モーダルの内容のコードも@foreach($myRoomMembers as $myRoomMember)で囲んだ、データを送れました。
<div class="room-enterning"> @if($room->user_id == $user->id) <div class="acbox room-enterning-content"><input id="ac" type="checkbox" /> <label for="ac">参加者</label> @foreach($myRoomMembers as $myRoomMember) <div class="acbox-under room-enterning-list"> <h5><a href="#modal-{{ $myRoomMember->id }}" class="modal-button" > {{ $myRoomMember->user->name }} </a></h5> </div> @endforeach </div> @endif </div> {{-- モーダル内容 --}} @foreach($myRoomMembers as $myRoomMember) <div class="modal-wrapper" id="modal-{{ $myRoomMember->id }}"> <a href="#!" class="modal-overlay"></a> <div class="modal-window"> <div class="modal-content"> <p class="modal_title">{{ $myRoomMember->user->name }}</p> <form method="POST" action="{{ route('member.destroy', $myRoomMember->id) }}"> @csrf @method('DELETE') <input type="hidden" id="user_id" name="user_id" value="{{$myRoomMember->id}}"> <div class="flex items-center justify-end mt-4"> <x-danger-button class="ms-4" onClick='return myMemberDeleteAlert();'> {{ $myRoomMember->user->name }}を強制退室 </x-danger-button> </div> </form> </div> <a href="#!" class="modal-close"><i class="far fa-times-circle"></i></a> </div> </div> @endforeach
投稿2024/05/08 19:06
総合スコア83
0
ループ外でループ内に利用された変数を遣おうとすると最後におさめられた情報だけ出てくるのは既にコメントの通り
PHP
1<?php 2$p = [0,1,2,3]; 3 4foreach($p as $a){ 5 echo $a; 6 echo PHP_EOL; 7} 8echo $a; 9/* 100 111 122 133 143 ← 15*/
モーダル自体は画面表示後の操作であるので、
「IDをかえたモーダルを同じループでリストの数だけ準備する」
か
「モーダルを1つにしてHTMLとして各パラメータを設置して操作、受け渡しする」
方法のどちらかをとることになります。
前者が数が増えれば増えるほどパフォーマンスに影響があるので後者がおススメです。
今回だと例えば、
<a href="#modal-01" class="modal-button">
このaタグがmodal起動のトリガーとなっているようなので、
このaタグにdata属性を設置して渡したい情報を属性値に設定し、
このaタグクリックイベントにて、data属性値を取得してモーダル内の任意の場所にあてるJavaScriptを時分で書くと良いと思います。
投稿2024/05/08 01:13
総合スコア80875
あなたの回答
tips
プレビュー
Q&A
