为啥 Owl Carousel 在我的 Laravel 应用程序中会破坏引导模式？

Posted 2023-03-14

【中文标题】为啥 Owl Carousel 在我的 Laravel 应用程序中会破坏引导模式？

【英文标题】：Why Does Owl Carousel Break Bootstrap Modal In My Laravel App?为什么 Owl Carousel 在我的 Laravel 应用程序中会破坏引导模式？

【发布时间】：2020-03-30 20:24:06

【问题描述】：

美好的一天。在我的 Laravel 应用程序中，我有一个用于显示所有产品的 foreach 循环。我还有一个 quickview 模式，用户可以在其中查看产品而无需加载新页面。此外，我使用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>

【问题讨论】：

您需要在 foreach 中添加模态 html。

感谢您的评论。当我将模式放在 foreach 循环中时，owl carousel 会阻止它显示。也许在某个地方发生了冲突。这就是为什么我决定把它放在外面。

您可以为模态 ID 添加第二个 foreach。

【参考方案1】：

试试这个代码：

<div class="product owl-carousel">
     <?php $modal_id = 0; ?>
     <?php $modal_ids = []; ?>
    @foreach($new_arrivals as $new_arrival)

        <div class="pro">

                <div class="pro-img">
                    <?php $modal_id = $new_arrival->id?>
                    <?php $modal_ids[] = $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    !-->

@foreach($modal_ids as $item)

    <div class="product-view">
        <div class="container">

            <div class="modal fade" id="$item">
                <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>
@endforeach

希望能帮到你。

【讨论】：

谢谢先生。将实现这一点。