javascript - 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();
});

问题是

var imgid

的值始终相同(在每个不同的情况下，它仅给出第一张图像的 imgid)。请注意，php foreach 循环没有问题，它可以正确获取。谢谢

Answer 1

更好的方法:由于您要迭代 $resultpics 来构建 HTML，因此您需要使用 classes 而不是 ids，因为重复的 ID 将导致 HTML 不一致。另外，由于您使用的是 data-popup-open 等数据属性，因此请利用 jQuery 的 .data() 方法，这样做:

<?php foreach ($resultpics as $row1) { ?>
    <div class="col-md-2">
        <a href="#" class="thumbnail" data-popup-open="popup-1">
            <input type="hidden" value="<?php echo $row1['img_id']; ?>" class="imgid">
            <img class="popimg" src="<?php echo $row1['img_path']; ?>/<?php echo $row1['img_id']; ?>.jpg">
        </a>
    </div>
<?php } ?>

<script>
    $(".thumbnail").click(function(e){
        e.preventDefault();
        var class_name = $(this).data('popup-open');
        $('[data-popup="' + class_name + '"]').fadeIn(350);
        var imgid = $(this).find('.imgid').val();
        $('img#viewimg').attr('src', 'images/' + imgid + '.jpg');
    });
</script>