Alguien me puede ayudar con js?? Necesito que todo el tiempo que se ejecute este foreach cree una "id" para abrir los diferentes modos de diálogo para cada publicación. ¿Cómo puedo implementar mi {{post->id}} en js y generar una nueva "id" para cada publicación?
Todo este código está dentro de otro foreach que enumera todas las publicaciones:
<button type="button" id="btn-open-modal"> Open </button> <dialog id="modal"> <table> @foreach ($post->likers as $user) <tr> <td> <a href="{{ route('profile', ['id' => $user->id]) }}"> <img class="rounded-md" style="width:50px; height:50px;" src="{{ $user->profile_photo_url }}" alt="{{ $user->name }}" /> </a> </td> <td> <a href="{{ route('profile', ['id' => $user->id]) }}"> {{$user->name}} </a> </td> </tr> @endforeach </table> <button id="btn-close-modal" class="btn"> Close </button> </dialog> <script> const btnOpenModal = document.querySelector("#btn-open-modal"); const btnCloseModal = document.querySelector("#btn-close-modal"); const modal = document.querySelector("#modal"); btnOpenModal.addEventListener("click",()=>{ modal.showModal(); }) btnCloseModal.addEventListener("click",()=>{ modal.close(); }) </script>Mi js es muy malo agradecería cualquier ayuda. Gracias 😉
Lo he intentado pero no puedo hacerlo... Si pongo manualmente el id específico de la publicación, funciona así +[id='12']
¿Cómo puedo pasar esta variable {{$post->id}} dentro del script?
var id = $(this).data('id'); const btnOpenModal = document.querySelector("#btn-open-modal" + [id = '12']); const btnCloseModal = document.querySelector("#btn-close-modal" + [id = '12']); const modal = document.querySelector("#modal" + [id = '12']); btnOpenModal.addEventListener("click", () => { modal.showModal(); }) btnCloseModal.addEventListener("click", () => { modal.close(); }) <button type="button" id="btn-open-modal{{$post->id}}"> Open </button>