laravel данных карт динамически в 1 модальный

Question

У меня есть карта, которая получает данные из базы данных, и с помощью @foreach я зацикливаю ее, чтобы каждый раз создавать карты.

@foreach($cards as $c)
                <div class="card_fold">
                    <button class="btn btn-danger top-left btn-fab btn-fab-mini btn-round ">
                        <i class="material-icons">clear</i>
                    </button>

                    <button id="create" class="btn btn-default top-right btn-fab btn-fab-mini btn-round " data-toggle="modal"
                        data-target="#imageModal">
                        <i class="material-icons">create</i>
                    </button>

                    <div class="card_fold__image-holder">
                        <img class="card_fold__image cover imgHolder" src="uploads/avatars/{{$c->img_src}}" alt="wave" />
                    </div>
                    <div class="card_fold-title">
                        <a href="#" class="toggle-info btn btn-primary">
                            <span class="left"></span>
                            <span class="right"></span>
                        </a>
                        <h2>
                            <input type="hidden" id="getId" value="{{$c->id}}" />
                            <div id="nameEnglish">{{$c->englishName}}</div>
                            <div id="nameAnime"> {{$c->animeName}}</div>
                            
                            <small id="age">AGE {{$c->age}}</small>
                        </h2>
                    </div>
                    <div class="card_fold-flap flap1">
                        <div class="card_fold-description" id="content">
                            {{$c->content}}
                        </div>
                        <div class="card_fold-flap flap2">
                            <div class="card_fold-actions">

                                <a href="#" class="btn btn-primary">Read more</a>
                                <div id="Large-content" style="display: none;">
                                    {{$c->largeContent}}
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
                @endforeach

идея состоит в том, чтобы иметь 1 модальное окно, подключенное ко всем картам

avatar }}">

Сейчас все идентификаторы одинаковы, и я пытаюсь найти способ отличить guish карты друг от друга. Это jquery, который я использую прямо сейчас, он работает только для первых карт, поскольку все они имеют одинаковый идентификатор. каким-то образом мне нужно что-то динамически добавлять, чтобы я мог различать guish, какие данные нужно получить.

$('#imageModal').on('shown.bs.modal', function() { 
            
            var img_src = $(".card_fold__image-holder").find("img").attr("src");
            var nameEnglish = document.getElementById("nameEnglish");
            var nameAnime = document.getElementById("nameAnime");
            var age = document.getElementById("age");
            var content = document.getElementById("content");
            var largeContent = document.getElementById("Large-content");
            
            $("#modal-input-english-name").val(nameEnglish.innerHTML );
            $("#modal-input-anime-name").val(nameAnime.innerHTML );
            $("#modal-input-age").val(age.innerHTML );
            $("#modal-input-content").val(content.innerHTML );
            $("#modal-input-large-content").val(largeContent.innerHTML );
            $("#output").attr("src", img_src);
        });

Answer 1

предположим, что ваш card имеет id, теперь нам нужно

• добавить атрибут data_id на каждую кнопку с этим card id
• изменить create Атрибут id в атрибут класса class="create"

<button class="btn btn-default top-right btn-fab btn-fab-mini btn-round create" data-toggle="modal"
        data-id="{{ $c->id }}">
        <i class="material-icons">create</i>
    </button>

теперь каждая кнопка будет иметь уникальный data-id

, тогда ваш jquery код будет следующим:

$(".create").click(function (evt) {
    evt.preventDefault();

    // getting the current clicked button `data-id`
    let data_id = $(this).data("id");

    // now as you have your card id you can change any thing in the modal
    var img_src = $(".card_fold__image-holder").find("img").attr("src");
    var nameEnglish = document.getElementById("nameEnglish");
    var nameAnime = document.getElementById("nameAnime");
    var age = document.getElementById("age");
    var content = document.getElementById("content");
    var largeContent = document.getElementById("Large-content");
        
    $("#modal-input-english-name").val(nameEnglish.innerHTML );
    $("#modal-input-anime-name").val(nameAnime.innerHTML );
    $("#modal-input-age").val(age.innerHTML );
    $("#modal-input-content").val(content.innerHTML );
    $("#modal-input-large-content").val(largeContent.innerHTML );
    $("#output").attr("src", img_src);

    // opening the modal
    $('#imageModal').modal('toggle');

});

Answer 2

вы должны добавить модальное окно также в foreach l oop, как показано ниже, чтобы иметь разные идентификаторы для каждого модального

img_src}}">

для jquery вы можете использовать что-то вроде ниже

$(document).on('show.bs.modal', '.modal', function () {
var zIndex = 1040 + (10 * $('.modal:visible').length);
$(this).css('z-index', zIndex);
setTimeout(function() {
    $('.modal-backdrop').not('.modal-stack').css('z-index', zIndex - 1).addClass('modal-stack');
}, 0);});