单击卡片以在带有下一个和上一个按钮的弹出窗口上显示其各自的详细信息

Posted

技术标签:

【中文标题】单击卡片以在带有下一个和上一个按钮的弹出窗口上显示其各自的详细信息【英文标题】：Click on the card to display their respective details on a popup with next and previous button 【发布时间】：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">&times;</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" >
          </div>
          <div class="carousel-item">
            <img src="http://placehold.it/1200x600/fffccc/000&text=Two" >
          </div>
          <div class="carousel-item">
            <img src="http://placehold.it/1200x600/fcf00c/000&text=Three" >
          </div>
          <div class="carousel-item">
            <img src="http://placehold.it/1200x600/fcf00c/000&text=Four" >
          </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，我更新了问题中的示例代码。 【参考方案1】：

当点击图片时，您可以获得包含该图片的 div 索引，即：0,1..etc，然后使用此索引我们可以使位于同一位置的carousel slide 处于活动状态。

演示代码：

//when img is clicked
$('.parentSlider-cell img').click(function() 
//get index for div 
  var idx = $(this).parents('div').index();
  console.log(idx)
  var id = parseInt(idx);
  $('.bd-example-modal-lg').modal('show'); // show the modal
  $(".carousel-inner").carousel(id); // slide carousel to selected
);
* 
  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="http://placehold.it/1200x600/555/000&text=One" /></a>
  </div>
  <div class="parentSlider-cell">
    <a href="javascript:void(0);"><img src="http://placehold.it/1200x600/555/000&text=two" /></a>
  </div>
  <div class="parentSlider-cell">
    <a href="javascript:void(0);"><img src="http://placehold.it/1200x600/fcf00c/000&text=Three" /></a>
  </div>
  <div class="parentSlider-cell">
    <a href="javascript:void(0);"><img src="http://placehold.it/1200x600/fcf00c/000&text=Four" /></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" >
          </div>
          <div class="carousel-item">
            <img src="http://placehold.it/1200x600/fffccc/000&text=Two" >
          </div>
          <div class="carousel-item">
            <img src="http://placehold.it/1200x600/fcf00c/000&text=Three" >
          </div>
          <div class="carousel-item">
            <img src="http://placehold.it/1200x600/fcf00c/000&text=Four" >
          </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>

【讨论】：

您的代码在 sn-p 中工作，我只想知道，如果我使用背景图像 instated 的图像标签，那么我必须使用什么脚本？我的意思是 test.com/wp-content/uploads/2020/08/1.jpg)"></…> 我在这一行遇到了问题 var idx = $(this).parents('div').index();如果我使用背景图片 只需更改选择器，即：$('.parentSlider-cell .bannerBg').click(function() 确保 div 在 parentSlider-cell 下。如果仍然不起作用，请告诉我。 var idx = $(this).parents('div').index();没有计算索引号

以上是关于单击卡片以在带有下一个和上一个按钮的弹出窗口上显示其各自的详细信息的主要内容，如果未能解决你的问题，请参考以下文章

如何显示弹出视图

单击图标时如何在 JqGrid 中打开带有 TextArea 的弹出窗口？

如何通过单击栏按钮关闭弹出框

FullCalendar 事件弹出按钮单击不起作用

ROBOT Framework无法单击弹出接受按钮

无法在外部单击时关闭带有动态内容的引导弹出窗口 - jquery