Question

我正在构建一个库，我需要能够点击图像，Jquery代码检索点击图像的来源，以便我以后可以操作它。问题是，我只能检索特定图像的图像src，但不能检索图像列表中的任何一个。我的标记是：

    <div class="row normally gallery">
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/nccamh.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">NCCAMH.ORG</p></a>
</div>
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/sewatrust.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">Sewa Trust</p></a>
</div>
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/pdf.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">PDF Sindh</p></a>
</div>
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/wejourno.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">PDF Sindh</p></a>
</div>
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/sso.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">Sujag Sunsar Organization</p></a>
</div>
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/sursociety.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">Sur Society</p></a>
</div>
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/dailysindh.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">Daily Sindh</p></a>
</div>
<div class="col-md-3 col-lg-3 col-sx-6 col-sm-6 thumbnail">
<a href="#"><img src="{{asset('images/projects/sawail.jpg')}}" class="img-responsive projects" alt="NCCAMH.ORG"/><p class="caption">Sawail</p></a>
</div>
</div>

和Jquery代码是：

$(document).ready(function() {
$('.gallery').click(function() {
var src = $(this).find('img').attr('src');
alert(src);
});
});

在我在这个div中点击的任何图像上，它只给出了第一张图像的img src。我应该怎么做，以便它点击任一图像，它会产生正确的img src。 ps：我尝试了另一个，但它产生'undefined'值：

$(document).ready(function() {
    $('img').click(function() {
    var src = $(this).find('img').attr('src');
    alert(src);
    });
    });

失败

Answer 1

$('.gallery img').click(function() {
    console.log(this.src);
});

或者，如果您的图片是动态加载的，.gallery元素是静态的：

$('.gallery').on('click', 'img', function() {
    console.log(this.src);
});

注意： this.src将比$(this).attr('src')或$(this).prop('src')更快。

Answer 2

您可以使用类缩略图编写div事件：

$(document).ready(function() {

    $('.thumbnail').click(function() {
      var src = $(this).find('img').attr('src');
      alert(src);
    });
  });

或：

$(document).ready(function() {

        $('.gallery').on('click','.thumbnail',function() {
          var src = $(this).find('img').attr('src');
          alert(src);
        });
      });

或直接在图像事件上：

$（document）.ready（function（）{

        $('.gallery').on('click','.img-responsive',function() {
          var src = $(this).attr('src');
          alert(src);
        });
      });

Answer 3

我认为你应该试试这个： -

$(document).ready(function() {
$('.gallery img').on('click',function() {
var src = $(this).attr('src');
alert(src);
});
});

这是我的小提琴http://jsfiddle.net/Tushar490/22ht5fkr/

Answer 4

 $(document).ready(function() {

  $('.thumbnail a img').click(function() {

  var src = $(this).attr('src');

   alert(src);

   });

});

如何使用Jquery从图像库中检索img src

4 个答案: