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

Question

我正在从我的网站上的数据库动态显示卡片滑块，该滑块正在运行。我正在使用以下代码作为卡片滑块。$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 轮播滑块代码，以便我可以检查下一张和上一张卡片的详细信息。我添加了一个用于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">现在我的问题是，我必须单击卡片才能在带有上一个和下一个按钮的弹出窗口中显示详细信息？这是一个例子。截至目前，如果您单击该Large modal按钮，它将打开带有滑块的弹出窗口。这仅用于测试。单击我的卡片后，我必须显示弹出窗口。

Answer 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" 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>