javascript - Html 模型框在 laravel View 中不工作循环

Question

我想在网页中使用带有 html 模态框的循环显示文本。文本保存在数据库中。我正在使用 laravel 框架。只显示第一个元素的模态框，可能是 JavaScript 未加载问题。 我用了https://www.w3schools.com/howto/howto_css_modals.asp模态框教程。使用了那个css和javascript代码。

刚刚使用了 w3schools 代码。

<div class="row">
    @foreach($dw as $ad)
        <!-- single product -->
        <div class="col-lg-4 col-md-6">
            <div class="single-product">
                <!--{{$ad->image}}-->
                <div>
                    <img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
                </div>

                <div class="product-details">
                    <h3 col-xl-5>{{$ad->jobtype}}</h3>
                    <div class="price col-xl-11">
                        <h6 col-xl-12>{{$ad->jobC}}</h6>
                        <div>
                            <button id="myBtn">Details</button>

                            <!-- The Modal -->
                            <div id="myModal" class="modal">

                                <!-- Modal content -->
                                <div class="modal-content">
                                    <span class="close">&times;</span>
                                    <p>{{$ad->details}}</p>
                                </div>
                            </div>
                        </div>
                    </div>
                    <div class="prd-bottom"><a href="{{url('/submitcv')}}">Send Your CV</a></div>
                </div>
            </div>
        </div>
    @endforeach   

没有错误显示但不是所有集合的工作模态框，只显示循环中的第一项

Answer 1

为每个模式设置 Id 并使用点击按钮打开它们

<div class="row">
            @foreach($dw as $ad)
                <!-- single product -->
                <div class="col-lg-4 col-md-6" {{ $makeId = 1 }}>
                    <div class="single-product">

                    <!--{{$ad->image}}-->
                    <div>
                    <img class="img-fluid" src="{{ asset('img/' . $ad->image) }}" alt="">
                    </div>
                        <div class="product-details">
                            <h3 col-xl-5>{{$ad->jobtype}}</h3>
                            <div class="price col-xl-11">
                                <h6 col-xl-12>{{$ad->jobC}}</h6>
                                <div>
                                <button class="myBtn" modal-id="modal-{{ $ad->id }}">Details</button>

                                <!-- The Modal -->
                                <div class="modal" id="modal-{{ $ad->id }}">

                                <!-- Modal content -->
                                <div class="modal-content">
                                    <span class="close">&times;</span>
                                    <p>{{$ad->details}}</p>
                                 </div>

                                </div>
                                </div>
                            </div>
                            <div class="prd-bottom"><a href="{{url('/submitcv')}}">Send Your CV</a></div>
                        </div>
                    </div>
                </div>@endforeach

                <script>
                    $('.myBtn').click(function(){
                        var GetModalId = $(this).attr('modal-id');
                        $("#"+GetModalId).css('display', 'block');
                    });

                    $('.close').click(function(){
                        $('.modal').css('display', 'none');
                    });
                </script>

请记住，您需要将 jquery 附加到您的页面才能使用此代码

您可以使用此代码附加 jquery:

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.4.1/jquery.min.js"></script>