Rails + JQuery + Bootstrap set 可变模态类

Question

我正在尝试设置一个按钮，根据轮播中当前显示的项目，它将显示相对的项目。 （例如显示项目1，按下按钮，显示项目1的详细信息;显示项目2，按下按钮，显示项目2的详细信息等）

我已经在下面尝试了这段代码，我想我可能正在接近它，但非常感谢对此的任何帮助。

请参阅下面的data-target以了解我尝试过的内容以及我尝试在 JQuery 中用于查找当前项目的index。

感谢您的任何帮助！ 真的很感激。

主.html.erb

<div id="coverflow">
        <ul class="flip-items">
            <li><%= image_tag "a.png", class: "img-thumbnail creation-thumb" %></li>
            <li><%= image_tag "b.png", class: "img-thumbnail creation-thumb" %></li>                
            <li><%= image_tag "c.png", class: "img-thumbnail creation-thumb" %></li>
            <li><%= image_tag "d.png", class: "img-thumbnail creation-thumb" %></li>            
            <li><%= image_tag "e.png", class: "img-thumbnail creation-thumb" %></li>
        </ul>
    </div>
    <%= link_to "See Details", "", class: "btn btn-primary", "data-toggle"=> "modal", "data-target" => "#portfolio#{}Modal" %>
</div>

模态窗口（示例 1）

<!-- Modal -->
<div id="portfolio1Modal" class="modal fade" role="dialog">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal ONE</h4>
      </div>
      <div class="modal-body">
       <p> ONE
      </p>
      </div>
    </div>
  </div>
</div>

主.js

var flipContainer = $('#coverflow'),
flipItemContainer = flipContainer.find('.flip-items');
var xo = flipItemContainer.children().index

Answer 1

我不熟悉 rails，但这是正常的操作方法。它应该是相同的概念。每个图像都有自己的按钮，当不是活动幻灯片时，该按钮是隐藏的。该按钮上是要显示的关联数据。工作链接在这里

   <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/bootswatch/3.3.7/cerulean/bootstrap.min.css" rel="stylesheet"/>
  <div id="coverflow">
        <ul class="flip-items">
            <li><img src="a.png" class="img-thumbnail creation-thumb"><a class="btn btn-primary " data-toggle="modal" data-value="first slide" data-target="#myModal">More Details</a></li>
            <li><img src="b.png" class="img-thumbnail creation-thumb" ><a class="btn btn-primary " data-toggle="modal" data-value="second slide" data-target="#myModal">More Details</a></li>
            <li><img src="c.png" class="img-thumbnail creation-thumb" ><a class="btn btn-primary " data-toggle="modal" data-value="third slide" data-target="#myModal">More Details</a></li>
            <li><img src="d.png" class="img-thumbnail creation-thumb"><a class="btn btn-primary " data-toggle="modal" data-value="fourth slide" data-target="#myModal">More Details</a></li>
          <li><img src="d.png" class="img-thumbnail creation-thumb" ><a class="btn btn-primary " data-toggle="modal" data-value="Last slide" data-target="#myModal">
              More Details</a></li>
        </ul>
    </div>



<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
  <div class="modal-dialog">
    <!-- Modal content-->
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal">&times;</button>
        <h4 class="modal-title">Modal ONE</h4>
      </div>
      <div >
       <div class="modal-body2"> This will be changed by data-value from caller
      </div>
      </div>
    </div>
  </div>
</div>

而JavaScript是

$(document).ready(function () {
    $('#myModal').on('show.bs.modal', function (e) {
        var content = $(e.relatedTarget).attr('data-value');
       $("div.modal-body2").text(content)
    });
});