Получить путь конкретных щелкнутых изображений

Question

Demo is here.

Когда я нажимаю на любом изображении, я хочу, чтобы получить путь к этому образу. Проблема здесь в том, что каждый раз указывается только путь изображения 1.

Кроме того, с этой новой ЦСИ, я хочу добавить, что SRC в изображении, имеющем ID = cropimage

$(".img").click(function() { 
    var newsrc = $(".img").attr("src"); 
    alert(newsrc); 
}); 

Answer 1

Использование $(this) внутри обработчика событий нажмите, чтобы получить элемент, который щелкнул. $(this) Внутренние обработчики событий - это элемент, на котором произошло событие.

Если вы используете $('.img'), он выберет все элементы, имеющие класс img и при использовании attr на нем он вернет значение атрибута первого совпадающего селектора.

Demo

$(".img").click(function() { 
 
    var newsrc = $(this).attr("src"); 
 
    $('#cropimage').attr('src', newsrc); 
 

 
    // Even Shorter Form 
 
    // $('#cropimage').attr('src', $(this).attr('src')); 
 
});

#cropimage { 
 
    background: yellow; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script> 
 
<img class="img" src="http://www.w3schools.com/images/w3schools.png" /> 
 
<br/> 
 
<img class="img" src="https://www.google.co.in/images/icons/hpcg/ribbon-black_68.png" /> 
 
<div id="img-container"> 
 
    <img src="" id="cropimage" /> 
 
</div>

Answer 2

Пожалуйста, проверьте эту ссылку Js Fiddle это поможет вам.

$(".img").click(function() { 
    var newsrc=$(this).attr("src"); 
    //alert(newsrc); 
    $("#cropimage").attr("src",newsrc); 

});