Question

您正在尝试基于每个团队成员的点击创建团队部分我正在显示具有特定成员详细信息的单个引导模式，我需要帮助使用jquery在模态内添加prev next按钮功能，这里是js小提琴网址https://jsfiddle.net/txkh3w16/2/

TEST2 厘米 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

以下是为您更新的小提琴：https://jsfiddle.net/txkh3w16/5/

基本上，当用户点击下一个按钮时，您需要找到下一张可用的卡片，而当用户点击上一张按钮时，您需要找到上一张可用的卡片。我通过跟踪modal变量中当前打开的openProfile来做到这一点。点击.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!");
  }
});

在bootstrap动态模态中的上一个下一个按钮

1 个答案: