Question

我制作了一个包含不同图像的图库，并在onClick上打开模态并显示图像的缩放。

我使用与投资组合相同的方法，但在这里我只有4项，所以我创建4个不同的模态，显示描述等等...

现在有了图像，我想要一个单一的模态来改变图像，以便用户在onClick上显示。

包含图像的div的结构如下：

   <div class="col-sm-3 galleria-item">
        <a class="galleria-link" href="#galleriaModal" data-toggle="modal">
          <div class="caption">
            <div class="caption-content">
              <i class="fa fa-search-plus fa-3x"></i>
            </div>
          </div>
          <img class="img-fluid" id="1" data-toggle="modal" data-target="#galleriaModal" src="foto/portfolio/portfolio1.jpg" alt="">
        </a>
      </div>

这里的模态：

<div id="galleriaModal" class="modal fade" role="dialog">
        <div class="modal-dialog">
            <div class="modal-content">
                <div class="modal-body">
                    <img class="img-responsive" src="" />
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-default" data-dismiss="modal">Chiudi</button>
                </div>
            </div>
        </div>
    </div>

这里是jQuery：

// Modal for gallery images
  $(function () {
        $('#galleriaModal').on('show.bs.modal', function (e) {
            var image = $(e.relatedTarget).attr('src');
            $(".img-responsive").attr("src", image);
        });
  });

遵循此link

问题是网站在点击图片时显示模态但不在内部显示图片...并且使用检查代码我看到src = unknown ...

我哪里错了？

修改

我确定问题是var image = $(e.relatedTarget).attr('src');没有采取用户点击的div图像路径！如何在div-＆gt; a-＆gt; img用户点击中获取图像的src？

Answer 1

e.relatedTarget是<a>标记而不是图片，但是一旦你拥有了锚点，它就很容易获得图像：

    $('#galleriaModal').on('show.bs.modal', function (e) {
        var image = $(e.relatedTarget).find('img').attr('src');
        $(".img-responsive").attr("src", image);
    });

Jquery在div中使用img标签的src路径 - ＆gt; a - ＆gt; img

1 个答案: