Question

<a href="javascript:void(0);" class="imgModal"><img src="1.jpg" /></a>
<a href="javascript:void(0);" class="imgModal"><img src="2.jpg" /></a>
<a href="javascript:void(0);" class="imgModal"><img src="3.jpg" /></a>
<div class="modal">
<img src="" />
</div>

$(document).ready(function(){
var link = $(".imgModal");
var modal = $(".modal");
var img = $(".modal img");
var src = $("img",this).attr("src");

link.click(function(){
    modal.css({"display":"block"});
    img.attr("src", src);
});

modal.click(function(){
    modal.css({"display":"none"});
});
});

这个想法很明显，modal div img中的img src应该与用户点击的img相同，事情就是当我点击时，我只在所有三个图像上获得相同的图像src。任何想法？

----固定----

Marc Anton Dahmen建议如下：

$(document).ready(function(){
var   link = $(".imgModal"),
      modal = $(".modal"),
      img = $(".modal img");

link.click(function(){
    modal.css({"display":"block"});
    img.attr("src", $(this).find("img").attr("src"));
});

modal.click(function(){
    modal.css({"display":"none"});
});
});

Answer 1

$(document).ready(function(){
    var   link = $(".imgModal"),
          modal = $(".modal"),
          img = $(".modal img");

    link.click(function(){
        modal.css({"display":"block"});
        img.attr("src", $(this).find("img").attr("src"));
    });

    modal.click(function(){
        modal.css({"display":"none"});
    });
});

在点击功能中获取src。

Answer 2

尝试将var src = $("img",this).attr("src");更改为var src = $(this).find('img').attr("src");

Answer 3

我现在在手机上，所以暂时无法测试。但是，您在页面加载时设置源而不是单击。尝试将src -row移动到单击操作中。

link.click(function(){
  modal.css({"display":"block"});
  var src = $(this).attr("src");
  img.attr("src", src);
});

Jquery：在不同的图像上获得相同的img src

3 个答案: