为什么 Owl Carousel 在我的 Laravel 应用程序中会破坏 Bootstrap

Question

再会。在我的 Laravel 应用程序中，我有一个用于显示所有产品的 foreach 循环。我还有一个快速查看模式，用户无需加载新页面即可查看产品。此外，我owlcarousel.js用来展示产品。不幸的是，owl.carousel 会破坏引导模式，除非模式位于 owl.carousel 之外。但是，由于产品是动态加载到页面上的，因此我无法访问包含循环的 owl carousel div 之外的模式的 ID。该$modal_id变量仅返回循环中的最后一个 Id。那么请问有什么出路呢？如何从外部单击访问循环内的各个 ID

代码如下所示

<div class="product owl-carousel">

     <?php $modal_id = 0; ?>

    @foreach($new_arrivals as $new_arrival)

        <div class="pro">

                <div class="pro-img">

                    <?php $modal_id = $new_arrival->id?>

                    <span class="sticker-new">new</span>

                    <div class="quick-view-pro">

                        <a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"

                           href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>

                    </div>

                </div>

        </div>

    @endforeach

</div>

<!--   Modal is shown below    !-->

<div class="product-view">

    <div class="container">

        <div class="modal fade" id="{{$modal_id}}">

            <div class="modal-dialog modal-lg modal-dialog-centered">

                <div class="modal-content">

                    <div class="modal-header">

                        <button type="button" class="close" data-dismiss="modal">&times;</button>

                    </div>

                    <!-- Modal body -->

                    <div class="modal-body">

                        <div class="row">

                        </div>

                    </div>

                    <!-- Modal footer -->

                </div>

            </div>

        </div>

    </div>

</div>

Answer 1

试试这个代码：<div class="product owl-carousel">&nbsp; &nbsp; &nbsp;<?php $modal_id = 0; ?>&nbsp; &nbsp; &nbsp;<?php $modal_ids = []; ?>&nbsp; &nbsp; @foreach($new_arrivals as $new_arrival)&nbsp; &nbsp; &nbsp; &nbsp; <div class="pro">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="pro-img">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php $modal_id = $new_arrival->id?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <?php $modal_ids[] = $new_arrival->id ?>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <span class="sticker-new">new</span>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="quick-view-pro">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <a data-toggle="modal" data-target="#{{$modal_id}}" class="quick-view modal-view"&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp;href="#{{$modal_id}}" rel="{{$new_arrival->id}}"></a>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; @endforeach</div><!--&nbsp; &nbsp;Modal is shown below&nbsp; &nbsp; !-->@foreach($modal_ids as $item)&nbsp; &nbsp; <div class="product-view">&nbsp; &nbsp; &nbsp; &nbsp; <div class="container">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal fade" id="{{$item}}">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-dialog modal-lg modal-dialog-centered">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-content">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-header">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <button type="button" class="close" data-dismiss="modal">&times;</button>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Modal body -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="modal-body">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <div class="row">&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; <!-- Modal footer -->&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; &nbsp; &nbsp; </div>&nbsp; &nbsp; </div>@endforeach希望能帮到你。