Laravel：如何在每次点击图片时在与图片相关的弹出模式中显示动态数据

Question

我必须设置小说设置，这意味着我必须在点击时显示每部相关小说的剧集。

   public function Novels()
    {
        $Novels = Novel::latest()->get();
        foreach($Novels as $novel)
        $novel->episodes = NovelEpisode::where('novel_id', $novel->id)->get();
        
        return view('novels.Novels',compact('Novels'));
    }

这是我的 laravel 控制器 blade 代码。

和这是我的 blade 代码，里面有一个模态。

 <div class="row mx-0 top-75">
                @foreach ($Novels as $novel)
                <div class="col-lg-4 col-md-4 text-end">
                    <div class="card">
                        <div class="card-body top-65">
                            <img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid" alt="img" id="myImg" >
                            <h5 class="card-title mbot-20 ptop-50">{{ $novel->name }}</h5>
                            <p class="card-text">{{ $novel->description }}</p>
                            <p class="price-text mb-5">قیمت۱۸۰۰روپے</p>
                            <div class="modal fade" id="myModal" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
                                <div class="modal-dialog modal-dialog-centered">
                                    <div class="modal-content">
                                        <div class="modal-body" id="modaldata">
                                            @foreach ($novel->episodes as $episode)
                                            <div class="container">
                                                <div class="row">
                                                    <div class="col-12">
                                                        <div class="main mt-2">
                                                            <div class="d-flex justify-content-center">
                                                                <a href="{{route('episode',['id'=>$episode->id])}}" class="text-decoration-none">
                                                                    <div class="modal-cont">
                                                                    <p class="mod-text">{{$episode->episode}}<span class=""><i class="fa-solid fa-angle-right next-icn"></i></span></p>
                                                                    </div>
                                                                </a>                                               
                                                            </div>
                                                        </div>                                                                  
                                                    </div>
                                                </div>          
                                            </div>
                                            @endforeach 
                                        </div>                                                   
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>            
                @endforeach
            </div>

这是我用来弹出模式的 jquery 代码。

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
    $(document).ready(function(){
        $('#myImg').click(function(){
              $('#myModal').modal('show')
        });
    });
    </script>

Answer 1

当您想在多个 dom 上放置一个事件侦听器时，您需要使用 class 而不是 id，因为 ids 属性只能针对一个 dom。

$('.myImg').click(function(){

接下来要为每个图像定位正确的模态，您需要有一种方法来区分它们。（也给每个模态一个唯一的id）

<div class="modal fade" id="myModal-{{$novel->id}}" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >

现在你只需要一种方法来获取正确的模态ID来显示它。一种简单的解决方案是使用 data-x 属性

<img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" data-id="{{$novel->id}" >

就是这样。

$('.myImg').click(function(){
    let id = $(this).data('id');
    $('#myModal-'+id).modal('show')
});

不使用data-x属性的另一个解决方案

使用 classes 并使用 find() 或 siblings() 定位模态

 <img src="{{ asset('uploads/user/2/novels/'. $novel->cover) }}" class="img-fluid myImg" alt="img" > 
//...used class

<div class="modal fade" data-bs-backdrop="true" data-bs-keyboard="false" tabindex="-1" aria-labelledby="staticBackdropLabel" aria-hidden="true" >
//... removed the id (not unique)

和JS

$('.myImg').click(function(){
    let modal = $(this).parent().find('.modal')[0];
    $(modal).modal('show')
});
//or
$('.myImg').click(function(){
    let modal = $(this).siblings('.modal')[0];
    $(modal).modal('show')
});

这是可能的，因为 img 和模态都在同一级别。

Laravel：如何在每次点击图片时在与图片相关的弹出模式中显示动态数据

Laravel: How to show dynamic data on popup modal related to image on every image click

javascript

php

laravel

eloquent

bootstrap-modal