javascript - 在模态中更改图片位置(bootstrap 3)

Question

我这里有一个模态示例:

    <!-- Large Modal -->
<div class="modal fade bs-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
  <div class="modal-dialog modal-lg">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
        <h4 class="modal-title" id="myModalLabel">funnycatnumberone</h4>
      </div>
      <div class="modal-body">

    <div class="row">
       <div class="col-lg-8 col-md-8">
        <img src="cat1.JPG" class="img-responsive">
       </div>
       <div class="col-lg-4 col-md-4">
           <p>brief description about my cat</p>
           <ul class="list-unstyled">
               <li>it has four legs</li>
               <li>also a tail</li>
               <li>likes boxes</li>
           </ul>
       </div>
       <br>
    </div> 
    <br>
    <div class="row">
        <div class="col-sm-2">
            <img src="cat2.JPG" class="img-responsive">
        </div>
        <div class="col-sm-2">
            <img src="cat3.JPG" class="img-responsive">
        </div>
        <div class="col-sm-2">
            <img src="cat4.JPG" class="img-responsive">
        </div>
        <div class="col-sm-2">
            <img src="cat5.JPG" class="img-responsive">
        </div>     
    </div>
</div>
      <div class="modal-footer">
        <a type="button" class="btn whateverclassimade" href="cutecatsmkay.php">check out some cats, yo</a>
        <a type="button" class="btn whateverclassimade" data-dismiss="modal">Close</a>
      </div>
    </div>
  </div>
</div>

当模式打开时，有一个标题、一张大图片(位于标题下方的左侧)、带有一些行以添加详细信息的简短描述、四张基本上是主图像正下方缩略图的图片，以及一些按钮关闭模型或将用户重定向到不同的页面。

这是我的问题:选择缩略图(在主图像下)时，我希望该图像代替较大的图像(也就是占据主图像舞台)。感谢您的帮助!

Answer 1

试试这个:
$("#thumbnail1").click(函数(){
$("#main_image").attr("scr", "图片来源");
});使用 id 对应于适当的标签