雄辩显示具有特定对象信息的模态

Question

在前端，我正在列出一些对象，并在单击显示其详细数据时进行另一个对象进行模态。

但是，在某种程度上，单击一个时，它会弹出一个模态，其中包含其他对象的每个详细信息。我只是在单击以访问其自己的数据时正在寻找。

有人可以帮我吗？

<section class="bg-light" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Projects</h2>
                <h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>
            </div>
        </div>
        <div class="row">
            @foreach (AppProject::all() as $project)
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal1">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fas fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img class="img-fluid" src="img/portfolio/project.jpg" alt="">
                </a>
                <div class="portfolio-caption">
                    <h5>Project ID: {{ $project->id }}</h5>
                    <p class="text-muted">{{ $project->title }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
<div class="portfolio-modal modal fade" id="portfolioModal1" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="modal-body">
                            @foreach (AppProject::all() as $project)
                            <!-- Project Details Go Here -->
                            <h2 class="text-uppercase">{{$project-> name}}</h2>
                            <p class="item-intro text-muted">Projects Info</p>
                            <img class="img-fluid d-block mx-auto" src="img/portfolio/project.jpg" alt="">
                            <p>{{$project-> abstract}}</p>
                            <ul class="list-inline">
                                @if($project-> consortium != null)
                                <li>Consortium: {{ $project-> consortium }} </li>
                                @endif @if($project-> funding != null)
                                <li>Funding: {{$project-> funding}}</li>
                                @endif @if($project-> proponent != null)
                                <li>Proponent: {{$project-> proponent}}</li>
                                @endif @if($project-> total_budget != null)
                                <li>Total budget: {{$project-> total_budget}}€</li>
                                @endif @if($project-> ciic_budget != null)
                                <li>CIIC budget: {{$project-> ciic_budget}}€</li>
                                @endif
                            </ul>
                            <button class="btn btn-primary" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i> Close Project</button>
                            @endforeach
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>

Answer 1

将所有模态HTML代码放入第二个循环中，然后为模态生成唯一的ID以正确工作

<section class="bg-light" id="portfolio">
    <div class="container">
        <div class="row">
            <div class="col-lg-12 text-center">
                <h2 class="section-heading text-uppercase">Projects</h2>
                <h3 class="section-subheading text-muted">Projects elaborated throughout the years</h3>
            </div>
        </div>
        <div class="row">
            @foreach (AppProject::all() as $project)
            <div class="col-md-4 col-sm-6 portfolio-item">
                <a class="portfolio-link" data-toggle="modal" href="#portfolioModal{{ $project->id }}">
                    <div class="portfolio-hover">
                        <div class="portfolio-hover-content">
                            <i class="fas fa-plus fa-3x"></i>
                        </div>
                    </div>
                    <img class="img-fluid" src="img/portfolio/project.jpg" alt="">
                </a>
                <div class="portfolio-caption">
                    <h5>Project ID: {{ $project->id }}</h5>
                    <p class="text-muted">{{ $project->title }}</p>
                </div>
            </div>
            @endforeach
        </div>
    </div>
</section>
@foreach (AppProject::all() as $project)
<div class="portfolio-modal modal fade" id="portfolioModal{{ $project->id }}" tabindex="-1" role="dialog" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="close-modal" data-dismiss="modal">
                <div class="lr">
                    <div class="rl"></div>
                </div>
            </div>
            <div class="container">
                <div class="row">
                    <div class="col-lg-8 mx-auto">
                        <div class="modal-body">
                            <!-- Project Details Go Here -->
                            <h2 class="text-uppercase">{{$project-> name}}</h2>
                            <p class="item-intro text-muted">Projects Info</p>
                            <img class="img-fluid d-block mx-auto" src="img/portfolio/project.jpg" alt="">
                            <p>{{$project-> abstract}}</p>
                            <ul class="list-inline">
                                @if($project-> consortium != null)
                                <li>Consortium: {{ $project-> consortium }} </li>
                                @endif @if($project-> funding != null)
                                <li>Funding: {{$project-> funding}}</li>
                                @endif @if($project-> proponent != null)
                                <li>Proponent: {{$project-> proponent}}</li>
                                @endif @if($project-> total_budget != null)
                                <li>Total budget: {{$project-> total_budget}}€</li>
                                @endif @if($project-> ciic_budget != null)
                                <li>CIIC budget: {{$project-> ciic_budget}}€</li>
                                @endif
                            </ul>
                            <button class="btn btn-primary" data-dismiss="modal" type="button">
                                <i class="fas fa-times"></i> Close Project</button>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
    @endforeach