私のモーダルに2つの画像を読み込むのに問題があります

Question

私は写真家であるクライアント用のサイトを作成しています。今のところ、彼はいくつかの写真カテゴリを持っています。クリックすると、そのカテゴリの画像がスライドショーに読み込まれます。スライドショーで画像をクリックすると、クリックされた画像と他の画像がポップアップ表示され、クリックされた画像divが表示されます。現在、最初の画像はロードされますが、2番目の画像はロードされません。 （私はコンソールを見て、そこにありますが、それは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>