为什么猫头鹰旋转木马在我的 Laravel 应用程序中破坏引导模式?

Question

美好的一天。在我的Laravel应用程序中，我有一个foreach循环，我可以在其中显示所有产品。我还有一个概览模式，用户可以在不加载新页面的情况下查看产品。此外，我正在使用owlcarousel.js来显示产品。不幸的是，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">
<?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

希望对您有所帮助。