Javascript 推特引导-点击图片显示模态，带有多个图片和多个模态。

我有9个图像，每一个都需要显示不同的模式。无论我点击哪个图片，它只显示第一个模态。我可以看出它们都有相同的ID，这可能是我的错误，但我对javascript也不是很在行。全部，单击一张图片，显示模式A及其内容，单击另一张图片，显示模式B及其不同内容

我所拥有的只是：

    <script type="text/javascript">$('#myModal').modal('show')</script>

      <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                <a href="sit1e" target="_blank">
                  <img src="1.png" class="img-responsive" />
                </a>
                <a href="site2" target="_blank">
                  <img src="2.png" class="img-responsive" />
                </a>
                 <div class="icons">
                <a href="sound"  target="_blank">
                  <img src="audio.png" class="img-responsive" />
                </a>
                <a href="print" target="_blank">
                  <img src="print.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">                    
                  <img src="info.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>

      <div class="col-md-4 col-sm-4 col-xs-12">
          <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal">
            <img src="2.jpg" class="img-responsive"/>
          </a>
      </div>

               <div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                <a href="sit1e" target="_blank">
                  <img src="1.png" class="img-responsive" />
                </a>
                <a href="site2" target="_blank">
                  <img src="2.png" class="img-responsive" />
                </a>
                 <div class="icons">
                <a href="sound"  target="_blank">
                  <img src="audio.png" class="img-responsive" />
                </a>
                <a href="print" target="_blank">
                  <img src="print.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">                    
                  <img src="info.png" class="img-responsive" />
                </a>
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>

---

如果你看到了错误，为什么不改正呢？如果您的html中有多个相同的ID，您的javascript将无法正常工作。我的javascript技能有点欠缺。无论我做什么，无论是更改ID，还是删除第一个图像，第一个图像的模式都会到处显示。我找不到任何其他使用图像切换模态的网站，所以这有点令人沮丧。我不喜欢按钮的外观，所以我真的希望这是可能的。

      <div class="col-md-4 col-sm-4 col-xs-12">
          <a href="#myModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#largeModal">
            First Modal
          </a>
          <a href="#smallModal" id="press1b" class="thumbnail" data-toggle="modal" data-target="#smallModal">
            Second Modal
          </a>
      </div>
<div class="modal fade" id="largeModal" tabindex="-1" role="dialog" aria-labelledby="largeModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                FIRST MODAL CONTENT
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>
<div class="modal fade" id="smallModal" tabindex="-1" role="dialog" aria-labelledby="smallModal" aria-hidden="true">
        <div class="modal-dialog modal-lg">
          <div class="modal-content">
            <div class="modal-header">
              <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
              <h4 class="modal-title" id="myModalLabel">1</h4>
            </div>
              <div class="modal-body">
                <h1>Select a unit to study.</h1>
                SECOND MODAL CONTENT
                <a href="" target="_blank">
                  <img src="link.png" class="img-responsive" />
                </a>
                </div>
              </div>
                <div class="modal-footer">
                  <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
                </div>
          </div>
        </div>
      </div>