jquery - Bootstrap 动态模式中的 Previous Next 按钮

Question

您好，我正在尝试根据每个团队成员的点击创建一个团队部分我正在展示一个包含特定成员详细信息的引导模式，我需要帮助使用 jquery 在模式中添加上一个下一个按钮功能，这是 js fiddle 网址 https://jsfiddle.net/txkh3w16/2/

测试2 厘米 TST-1 副总理

          <div class="modal fade" id="profileDetail" tabindex="-1" role="dialog" aria-labelledby="profileDetail" aria-hidden="true">
  <div class="modal-dialog modal-lg" role="document">
    <div class="modal-content">
      <div class="modal-body">
        <div class="profiledetail-head">
          <div class="profiledetail-head-inner">
            <div class="profiledetail-avatar"></div>
            <div class="profiledetail-name-desg">
              <h2 class="profiledetail-name"></h2>
              <div class="profiledetail-desg"></div>
            </div>
          <div class="clearfix"></div>
          </div>
        </div>
        <div class="profiledetail-content">
          <span class="profile-title"></span>
          <span class="profile-content"></span>
        </div>
        <div class="modal-controls">
          <div class="prev"> < prev</div>
          <div class="next">next > </div>
        </div>
      </div>
    </div>
  </div>
</div>

Answer 1

这是为您更新的 fiddle :https://jsfiddle.net/txkh3w16/5/

基本上，当用户点击下一个按钮时，您需要找出下一张可用的卡片，而当用户点击上一个按钮时，您需要找出上一张。我通过在 openProfile 变量中跟踪当前打开的 modal 来做到这一点。单击 .next 或 .prev 时，您需要找到适用的 .profile-card 并将其内容填充到模式中。

但是当您单击 .profile-card 时，打开的模式由于其上的 blur 事件而被隐藏。因此，您可以使用 $('#profileDetail').modal('show') 再次打开它。但是由于模态隐藏的动画可能正在进行中，您需要等待半秒才能重新打开模态。

$(".next").click(function(event){
  var cards = openProfile.parents('.row').find(".profile-card");
  var currentCardIndex = cards.index(openProfile);
  if(cards.length > (currentCardIndex + 1)) {
    cards.get(currentCardIndex + 1).click();
    setTimeout(function() {
        $("#profileDetail").modal("show");
    },500);
  } else {
    alert("You are on the last card!");
  }
});