Как получить img src из галереи изображений с помощью JQuery

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. пс: Я попробовал другое, но он дает 'неопределенное' значение:

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

НЕСОСТОЯВШЕМСЯ

Answer 1

Вы можете написать событие 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); 
     }); 
     }); 

или по событию изображения непосредственно:

$ (документ) .ready (функция() {

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

Answer 2

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

Или, если ваши изображения загружаются динамически и .gallery элемент является статическим:

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

ПРИМЕЧАНИЕ:this.src w хуже, чем $(this).attr('src') или $(this).prop('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); 

    }); 

});