ディレクトリjqueryから複数の画像を読み込み

Question

ウェブフォルダから複数の画像をブートストラップモーダルに読み込みたい。私は成功したイメージsrcの文字列を置き換えようとしました。問題は、画像フォルダに基づいて異なる画像を読み込むために同じボタンを使用したいということです。

<div class="container"> 
<h3>Ex1</h3> 

<button id="image1" type="button" class="btn btn-info btn-lg" data- 
toggle="modal" data-target="#myModal">Open Modal</button> 

<h3>Ex2</h3> 

<button id="image2" type="button" class="btn btn-info btn-lg" data- 
toggle="modal" data-target="#myModal">Open Modal</button> 

<div class="modal fade" id="myModal" role="dialog"> 
<div class="modal-dialog" style="width:635px"> 

    <!-- 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 Header</h4> 
    </div> 
    <div class="modal-body"> 
     <img src="https://www.jssor.com/demos/img/gallery/980x380/001.jpg" alt="Mountain View" style="width:600px; height: auto"> 
    </div> 
    <div class="modal-footer"> 
     <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
    </div> 
    </div> 

</div> 
</div> 
<script> 
    $(document).ready(function(){ 

var img = $(".modal-body img"); 
var imgSelected; 




$("button").click(function(){ 
if($("button") === $("#image1")){ 
imgSelected = "002"; 
} 
else{ 
imgSelected = "003"; 
} 

    img = $(".modal-body img"); 

    img.attr("src", img.attr("src").replace("001", imgSelected)); 

}); 


}); 
</script> 
</div> 

この方法では唯一の代わりにクリックイベントを使用することができますimgSelected 003

Answer 1

表示されています：ショーのインスタンスメソッドがあり、このイベントが発生したときに直ちに：

show.bs.modalこれは私が試したものですと呼ばれる。クリックによって発生した場合、クリックされた要素はイベントのrelatedTargetプロパティとして使用できます。

イメージソースを変更するには、次回モーダルを開くときにsrc値が変更されるため、002または003のような固定パターンの代わりに正規表現パターンが必要です。

したがって、私の提案は次のとおりです。

$(document).ready(function(){ 
 
    $('#myModal').on('show.bs.modal', function(e) { 
 
     var imgSelected; 
 
     if (e.relatedTarget.id == "image1"){ 
 
      imgSelected = "002"; 
 
     } else { 
 
      imgSelected = "003"; 
 
     } 
 
     $(this).find(".modal-body img").attr('src', function(idx, attr) { 
 
      return attr.replace(/(\/)\d+(\.jpg)$/, '$1' + imgSelected + '$2'); 
 
     }) 
 
     $(this.dataset.target).modal('show'); 
 
    }); 
 
});

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css"> 
 
<script src="https://code.jquery.com/jquery-2.1.1.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 

 

 
<div class="container"> 
 
    <h3>Ex1</h3> 
 
    <button id="image1" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 
 
    </button> 
 
    <h3>Ex2</h3> 
 

 
    <button id="image2" type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal 
 
    </button> 
 
    <div class="modal fade" id="myModal" role="dialog"> 
 
     <div class="modal-dialog" style="width:635px"> 
 

 
      <!-- 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 Header</h4> 
 
       </div> 
 
       <div class="modal-body"> 
 
        <img src="https://www.jssor.com/demos/img/gallery/980x380/001.jpg" alt="Mountain View" 
 
         style="width:600px; height: auto"> 
 
       </div> 
 
       <div class="modal-footer"> 
 
        <button type="button" class="btn btn-default" data-dismiss="modal">Close</button> 
 
       </div> 
 
      </div> 
 

 
     </div> 
 
    </div> 
 
</div>