【发布时间】：2020-12-10 03:40:40
【问题描述】：
我正在从我正在工作的网站上的数据库中动态显示卡片滑块。我正在为卡片滑块使用下面的代码。
$data = '<div class="main-carousel planSliders mt-5">';
foreach($plans as $plan){
$tid = $plan->ID;
$data.= '<div class="carousel-cell">
<a href="'.esc_url( get_permalink($tid)).'"><div class="planBg" style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('.get_the_post_thumbnail_url($tid).')">
<div class="planInfo">
<h4>'.$plan->post_title.'</h4>
</div>
</div>
</a> </div>';
}
$data.='</div>';
上面代码的输出是，
--------------------------------------
< | card 1 | card 2 | card 3 | card 4 | > many more
| | | | |
--------------------------------------
现在我要做的是，当用户点击任何卡片时，弹出窗口将打开，其中包含相应的详细信息以及上一个和下一个按钮。
对于弹出窗口，我使用了 bootstrap 4 模式代码并添加了 bootstrap carousel 滑块代码，以便我可以检查下一张和上一张卡片的详细信息。
我添加了一个名为 Test button 的按钮用于测试目的，以检查我是否正在获取包含所有滑块数据的模态。是的，它正在工作。
$data.='<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">Test button</button>
<div class="planPopup modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<button type="button" class="close closePopup" data-dismiss="modal">×</button>
<div id="planOpenPopup" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">';
$i=1;
foreach($plans as $plan){
$item_class = ($i == 1) ? 'carousel-item active' : 'carousel-item';
$tid = $plan->ID;
$data.='<div class="'.$item_class.'">
<div class="planPopupWrapper">
<div class="planPopupBG" style="background-image:linear-gradient(rgba(0, 0, 0, 0.4), rgba(0, 0, 0, 0.4)),url('.get_the_post_thumbnail_url($tid).')">
</div> <div class="planPopupContent"><h4>'.$plan->post_title.'</h4><p>'.$plan->post_content.'</p></div></div></div>';
$i++;
}
$data.='</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#planOpenPopup" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#planpenPopup" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
</div>
</div>
</div>
</div>';
现在我的问题是，我必须点击卡片才能在带有上一个和下一个按钮的弹出窗口上显示详细信息？
这是一个例子。到目前为止，如果您单击 Large modal 按钮，它将打开带有滑块的弹出窗口。这只是为了测试。点击我的卡片后，我必须显示弹出窗口。
* {
box-sizing: border-box;
}
body {
font-family: sans-serif;
}
.parentSlider {
display: grid;
grid-gap: 20px;
grid-template-columns: repeat(4, 1fr);
}
.parentSlider-cell img {
width: 100%;
}
.modal-dialog {
max-width: 80%;
}<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="parentSlider">
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 1" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 2" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 3" /></a>
</div>
<div class="parentSlider-cell">
<a href="javascript:void(0);"><img src="//placehold.it/450x280?text=Image 4" /></a>
</div>
</div>
<button type="button" class="btn btn-primary mt-5" data-toggle="modal" data-target=".bd-example-modal-lg">Large modal</button>
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div id="demo" class="carousel slide" data-ride="carousel">
<!-- The slideshow -->
<div class="carousel-inner">
<div class="carousel-item active">
<img src="http://placehold.it/1200x600/555/000&text=One" alt="Los Angeles">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fffccc/000&text=Two" alt="Chicago">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fcf00c/000&text=Three" alt="New York">
</div>
<div class="carousel-item">
<img src="http://placehold.it/1200x600/fcf00c/000&text=Four" alt="test">
</div>
</div>
<!-- Left and right controls -->
<a class="carousel-control-prev" href="#demo" data-slide="prev">
<span class="carousel-control-prev-icon"></span>
</a>
<a class="carousel-control-next" href="#demo" data-slide="next">
<span class="carousel-control-next-icon"></span>
</a>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>你能帮我解决这个问题吗？
【问题讨论】：
-
创建演示代码可能有助于解决您的问题。
-
但这是逻辑部分，我相信 php 代码在 sn-p 中不起作用。
-
您可以从浏览器的
element tab添加 html 生成的代码，而不是 php 代码，并从中创建运行代码。 -
@Swati，让我尝试添加
-
@Swati，我更新了问题中的示例代码。
标签： javascript php html jquery twitter-bootstrap