jquery在div-->a-->img中获取img标签的src路径

Question

我正在制作一个包含一些不同图像的画廊，并使用 onClick 打开模式并显示图像的缩放。

我对 Portfolio 使用相同的方法，但这里我只有 4 个项目，所以我创建了 4 个不同的模式来显示描述等...

现在有了图像，我想要一个单一的模式来改变图像以在用户点击时显示。

包含图像的 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->a->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);
    });