javascript - 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>标记而不是图像，但是一旦有了 anchor 就很容易获得图像:

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