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 个模式动态连接到所有卡片。

<div class="modal fade" id="imageModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
        aria-hidden="true">
        <div class="modal-dialog" role="document">
            <div class="modal-content">
                <div class="modal-header">
                    <h5 class="modal-title" id="exampleModalLabel">Edit image</h5>
                    <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                        <span aria-hidden="true">&times;</span>
                    </button>
                </div>
                <form action="/editor" method="post" enctype="multipart/form-data">
                    @csrf
                    <div class="modal-body">
                        <div class="card " style="width: 28rem;">
                            <img id="output" src="uploads/avatars/{{ Auth::user()->avatar }}" class="card-img-top "
                                style="max-height: 28rem; object-fit: cover;" rel="nofollow">
                            <div class="card-body">
                                <label for="avatar" class=" btn btn-primary" style="min-width: 100%;">
                                    Select a file
                                </label>
                                <input name="avatar" id="avatar" type="file" onchange="loadImg(event)" />
                            </div>
                        </div>

                        <div class="form-group">
                                <label for="modal-input-english-name">English Name</label>
                                <input type="text" class="form-control" id="modal-input-english-name" placeholder="...">
                            </div>

                            <div class="form-group">
                                <label for="modal-input-anime-name">Anime Name</label>
                                <input type="text" class="form-control" id="modal-input-anime-name" placeholder="...">
                            </div>

                            <div class="form-group">
                                <label for="modal-input-age">Charachter Age</label>
                                <input type="text" class="form-control" id="modal-input-age" placeholder="...">
                            </div>

                            <div class="form-group">
                                <label for="exampleFormControlInput1">Content</label>
                                <textarea class="form-control" id="modal-input-content" rows="2"></textarea>
                            </div>

                            <div class="form-group">
                                <label for="exampleFormControlTextarea1">Read More Content</label>
                                <textarea class="form-control" id="modal-input-large-content" rows="3"></textarea>
                            </div>
                    </div>
                    <div class="modal-footer">
                        <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                        <button type="submit" class="btn btn-primary">Save changes</button>
                    </div>

                    
                </form>
            </div>
        </div>
    </div>

现在所有的 id 都是一样的，我正在尝试找出一种方法来区分卡片。这是我现在正在使用的 jquery，它只适用于第一张卡片，因为它们都具有相同的 ID。在某种程度上，我需要动态添加一些东西，这样我才能区分要获取的数据。

$('#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

您还必须像下面这样在 foreach 循环中添加模态，以便每个模态具有不同的 ID

@foreach($cards as $k=>$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{{$k+1}}">
                    <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>
            <div class="modal fade" id="imageModal{{$k+1}}" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel"
    aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="exampleModalLabel">Edit image</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <form action="/editor" method="post" enctype="multipart/form-data">
                @csrf
                <div class="modal-body">
                    <div class="card " style="width: 28rem;">
                        <img id="output" src="uploads/avatars/{{ Auth::user()->avatar }}" class="card-img-top "
                            style="max-height: 28rem; object-fit: cover;" rel="nofollow">
                        <div class="card-body">
                            <label for="avatar" class=" btn btn-primary" style="min-width: 100%;">
                                Select a file
                            </label>
                            <input name="avatar" id="avatar" type="file" onchange="loadImg(event)" />
                        </div>
                    </div>

                    <div class="form-group">
                            <label for="modal-input-english-name">English Name</label>
                            <input type="text" class="form-control" id="modal-input-english-name" placeholder="...">
                        </div>

                        <div class="form-group">
                            <label for="modal-input-anime-name">Anime Name</label>
                            <input type="text" class="form-control" id="modal-input-anime-name" placeholder="...">
                        </div>

                        <div class="form-group">
                            <label for="modal-input-age">Charachter Age</label>
                            <input type="text" class="form-control" id="modal-input-age" placeholder="...">
                        </div>

                        <div class="form-group">
                            <label for="exampleFormControlInput1">Content</label>
                            <textarea class="form-control" id="modal-input-content" rows="2"></textarea>
                        </div>

                        <div class="form-group">
                            <label for="exampleFormControlTextarea1">Read More Content</label>
                            <textarea class="form-control" id="modal-input-large-content" rows="3"></textarea>
                        </div>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
                    <button type="submit" class="btn btn-primary">Save changes</button>
                </div>

                
            </form>
        </div>
    </div>
</div>
@endforeach

对于 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);});

Answer 2

假设您的 card 有一个 id 现在我们需要

使用此 card id

data_id

将 create id 属性更改为 class 属性 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');

});

laravel 卡片数据动态到 1 模态

laravel cards data dynamically to 1 modal

laravel

bootstrap-modal