Question

我正在为一位摄影师的客户创建一个网站。截至目前，他有几个照片类别，点击后将该类别的图像加载到幻灯片中。如果在幻灯片中单击图像，我想要弹出一个模式，显示单击的图像以及另一个图像，单击的图像div。目前，第一张图片加载但第二张图片不加载。（我看着控制台，它在那里，但它说src是未知的）有人可以帮我这么做吗？

<div id="myModal" class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class = "modal-body">
              <!-- Modal Content (The Image) -->
              <img  src="" id = "mimg" class = "modalimg">
              <img  src="" id = "mimg2" class = "modalimg2">
          </div>
        </div>
      </div>
    </div>

<div class = "img1">
                <img src = "http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
                <img src = "https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
            </div>

$("img").click(function(){
            var sr=$(this).attr('src');
            var parent = $(this).parent();
            var sr2 = $(parent).children('img1').eq(2);
            $('#mimg').attr('src',sr);
            $('#mimg2').attr('src',sr2);
            $("#myModal").modal(); 
        });

Answer 1

您的脚本中有一些错误。只需使用以下代码段更新您的脚本。

$("img").click(function(){
    var sr=$(this).attr('src');
    var parent = $(this).parent();
    var sr2 = $(this).siblings('img').attr('src');
    $('#mimg').attr('src',sr);
    $('#mimg2').attr('src',sr2);
    $("#myModal").modal(); 
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<div id="myModal" class="modal">
      <div class="modal-dialog">
        <div class="modal-content">
          <div class = "modal-body">
              <!-- Modal Content (The Image) -->
              <img  src="" id = "mimg" class = "modalimg">
              <img  src="" id = "mimg2" class = "modalimg2">
          </div>
        </div>
      </div>
    </div>

<div class = "img1">
                <img src = "http://www.defenders.org/sites/default/files/styles/large/public/tiger-dirk-freder-isp.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
                <img src = "https://upload.wikimedia.org/wikipedia/commons/7/73/Lion_waiting_in_Namibia.jpg" class="img-responsive" alt = "BlackProPix Photography" height = "160px" width = "176px">
            </div>

无法将两个图像加载到我的模态中

1 个答案: