My equals selector is only selecting the first item on my list. It doesn't matter which image I click, it always sets my jQuery variables to the first item. Thanks!
//PHP
<div class="imgContain">
<img id="finalimg" alt="first" src="website.com/imga546.jpg">
<img id="finalimg" alt="second" src="website.com/imga645.jpg">
<img id="finalimg" alt="thrid" src="website.com/imga6786.jpg">
<img id="finalimg" alt="4th" src="website.com/imga31234.jpg">
</div>
//jQuery
$('.imgContain').on("click", "img", function () {
var srcc = $('img[id="finalimg"]').attr('src');
var linkU = $('img[id="finalimg"]').attr('alt');
});
element id's need to be unique. you should use classes instead.
Since id
must be unique, you need to use class instead:
<div class="imgContain">
<img class="finalimg" alt="first" src="website.com/imga546.jpg">
<img class="finalimg" alt="second" src="website.com/imga645.jpg">
<img class="finalimg" alt="thrid" src="website.com/imga6786.jpg">
<img class="finalimg" alt="4th" src="website.com/imga31234.jpg">
</div>
then you can use .
to target elements by class as well as using $(this)
to get reference to current clicked image with class finalimg
:
$('.imgContain').on("click", ".finalimg", function () {
var srcc = $(this).attr('src');
var linkU = $(this).attr('alt');
});
You get Unique ID of image on its click and do manipulation as follows
Working fiddle demo http://fiddle.jshell.net/8kmdt/
<div class="imgContain">
<img id="img1" alt="first" src="website.com/imga546.jpg">
<img id="img2" alt="second" src="website.com/imga645.jpg">
<img id="img3" alt="thrid" src="website.com/imga6786.jpg">
<img id="img4" alt="4th" src="website.com/imga31234.jpg">
</div>
then change your jQuery code to:
$('.imgContain').on("click", "img", function () {
var getID=$(this).attr("id");
var source = $("#"+getID).attr('src');
var linkOfImg = $("#"+getID).attr('alt');
});