Question

我想将web文件夹中的多个图像加载到bootstrap模式中。我尝试替换成功的图像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：调用show实例方法时会立即触发此事件。如果由单击引起，则单击的元素可用作事件的relatedTarget属性。

为了更改图像源，您需要一个正则表达式而不是像002或003那样的固定模式，因为下次打开模态时，src值会发生变化。

因此，我的建议是：

＆＃13;

$(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');
    });
});

＆＃13;

<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>

＆＃13;

从目录jquery加载多个图像

1 个答案: