来自php foreach循环的隐藏输入值未正确传递给JQuery

Question

HTML + PHP :

<?php foreach ($resultpics as $row1){ ?>
<div class="col-md-2">
<a href="#" class="thumbnail" data-popup-open="popup-1"<!-onclick="showImg(<?php //echo $row1['img_id']; ?>-->)">
<input type="hidden" name="imgid" value="<?php echo $row1['img_id']; ?>" id="imgid">
<img id="popimg" src="<?php echo $row1['img_path'];?>/<?php echo $row1['img_id']; ?>.jpg" alt="Pulpit Rock" style="width:200px;height:150px;">  
</a>
</div>  
<?php } ?>

JQuery:

$('[data-popup-open]').on('click', function(e)  {
    var targeted_popup_class = jQuery(this).attr('data-popup-open');
    $('[data-popup="' + targeted_popup_class + '"]').fadeIn(350);
    var imgid = $('input[name=imgid]').val();
    alert(imgid);
    $('img#viewimg').attr('src','images/'+imgid+'.jpg');
    e.preventDefault();
});

The problem is the value of

var imgid

is always same(on every different it gives the imgid of first image only). Note that there is no problem in php foreach loop, it fetch's correctly. Thanks

Answer 1

the problem is you have multiple input elements having name="imgid". So when you query $('input[name=imgid]') jquery parses all of the DOM and creates an object having 0 to 'n' input tags (n being the number of elements matching your query). If you use val() on this object it will always return the value of 0'th element in the object.

Solution:

change this

var imgid = $('input[name=imgid]').val(); 

to this

var imgid = $(this).next().val();