雄辩地展示带有特定对象信息的模态

Question

在前端，我列出了一些对象，并在单击以显示其详细数据时执行另一个foreach来模化每个对象。

但是，以某种方式，当单击一个时，它会弹出一个包含其他对象的每个细节的模态。我只是在单击以访问其自己的数据时查看。

有人可以帮我吗？

<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 (\App\Project::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 (\App\Project::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 (\App\Project::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 (\App\Project::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