laravel 将数据动态卡到 1 个模态

问题描述 投票：0回答：3

我有一张从数据库获取数据的卡片，并且使用 @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);
        });
laravel bootstrap-modal
3个回答
0
投票

您还必须在 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);});
0
投票

假设您的 

card
有一个 
id
现在我们需要

  • 使用此 
    data_id
    id 在每个按钮上添加 
    card
    属性
  • 将 
    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');

});
0
投票

如上所述，这也适用于 Bootstrap Offcanvas 按钮。通过将 {{$key+1}} 添加到 Offcanvas 按钮 id=staticBackdro 和 data-bs-target=#staticBackdrop。

@foreach ($content $key => $item)
          <div class="col-md-3">                         
         <button class="btn btn-primary" type="button" data-bs- 
         toggle="offcanvas" data-bs-target="#staticBackdrop{{$key+1}}" aria- 
         controls="staticBackdrop">Link</button>
                                      
          <div class="offcanvas offcanvas-start" data-bs-backdrop="static" 
          tabindex="-1" id="staticBackdrop{{$key+1}}" 
          aria-abelledby="staticBackdropLabel">
                               <div class="offcanvas-header">
                                      <h5 class="offcanvas-title" 
                                        id="staticBackdropLabel">Offcanvas</h5>
                                       <button type="button" class="btn-close" 
                                       data-bs-dismiss="offcanvas" aria-label="Close"></button>
                                        </div>
                                       <div class="offcanvas-body">
                                        <div class='off-card'>
                                         <div class='offcanvas-box'>
                                        <h5 class="offcard-title">{{$item->category}}</h5>                                                     
                                          </div>
@endforeach
最新问题
© www.soinside.com 2019 - 2024. All rights reserved.