javascript - 如何打开 Bootstrap 轮播中的每个特定元素？

Question

我在 this page 上有一个 jQuery 垂直时间轴当单击每个图像时，我试图在时间轴上打开每个特定图像，它是自己的模态。模态弹出窗口与 prev next 按钮一样工作，但无论您单击哪个图像，它总是会打开第一张图像。我需要在每个模态、日期、名称等上添加不同的信息，所以我希望与每个图像相关的信息与弹出的每个模态相匹配。

我已通读这篇文章 #210936但没有运气。我知道我的代码很相似而且我很接近，但我看不出我遗漏了什么。任何帮助深表感谢。谢谢!

HTML 模式触发器:

<!-- 1900's Time Period Start -->
   <div class="cd-timeline-block">
      <div class="cd-timeline-img cd-movie">
        <span class="title"><strong>1900's</strong></span>
      </div> <!-- cd-timeline-img -->

      <div class="cd-timeline-content left">
        <h2>First Surfing Recorded</h2>
        <div class="flex-item1">
          <!-- Image to Trigger Modal -->
          <a href="#myModal" class="modalImg image-border image-border" data-toggle="modal">
            <img src="images/boards_v2.png"></a>
        </div>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.</p>
        <a href="#myModal" class="cd-read-more" data-toggle="modal">Read more</a>
        <span class="cd-date right" id="1900's">Jan 18</span>
      </div> <!-- cd-timeline-content -->
    </div> <!-- cd-timeline-block -->

用于模式的 HTML:

<!-- Modal Code Start -->
<div class="modal fade" id="myModal" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" data-interval="false">
<div class="modal-dialog">
 <div class="modal-content">
  <div class="modal-header">
  </div>

  <div class="modal-body">
    <!-- Indicators -->
    <div class="carousel slide" data-interval="false" id="MyCarousel">

      <!-- Wrapper for slides -->
      <div class="carousel-inner timeline">

        <!-- 1st Modal in Timeline -->
        <div class="item active" id="modal1">

          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <h1>First Surfing Recorded</h1>
            <div class="col-1">
              <img src="images/boards.png" id="img1" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 2nd Modal in Timeline -->
        <div class="item" id="modal2">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Service Infrastructure</h1>
              <img src="images/taihitian_surfers_joseph_banks_lg.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>

        <!-- 3rd Modal in Timeline -->
        <div class="item">
          <button type="button" class="close" data-dismiss="modal" aria-label="Close">
            <span aria-hidden="true">&times;</span>
          </button>

          <div class="row">
            <div class="col-1">
              <h1>Tom Blake and Sam Reid surf Malibu for the first time</h1>
              <img src="images/rawImage_pcr_fred_windisch.jpg" id="img2" alt="" /></a>
            </div>

            <div class="col-2">
              <div class="description"></div>
              <p>In the bricks 3rd reef burner oil rip the pit fair-good point break sand bottom. Elevator drop heavy slice healthy float tomb-stoning kelp slash quiver sand bottom A frames wonky.</p>
            </div>
          </div>
        </div>
      </div>

      <!-- Controls -->
      <a href="#MyCarousel" class="left carousel-control timeline" data-slide="prev"><span class="glyphicon left"></span></a>
      <a href="#MyCarousel" class="right carousel-control timeline" data-slide="next"><span class="glyphicon right"></a>

      </div>

    </div>
  </div>
</div>

用于模态的 Javascript:

// Timeline Modal
$(function() {
  $('.cd-timeline').on('click', '.flex-item1', function() {
    $('#myModal').modal('show');
    $('#MyCarousel').carousel($(this).index()); 
  });   
});

Answer 1

你只有一个模式，叫做#myModal。您所有的链接都指向那个模态。所以，真的，没有理由不会为他们中的每个人打开该模式。

您需要创建模态 HTML 的多个实例，为每个实例分配一个唯一的 ID，然后将您的 HREF 指向这些实例。一个例子很多:

<a href="#waimea" class="cd-read-more" data-toggle="modal">Waimea Surfed for First Time</a>

<div class="modal fade" id="waimea"><!-- contents of waimea modal --></div>

我猜你的 jQuery 看起来像这样:

// Timeline Modal
$(function() {
  $('.cd-timeline').on('click', '.flex-item1', function() {
    $($(this).attr('href')).modal('show');
  });   
});

不确定轮播，因为目前的代码还不够，但概念应该是相似的!