来自 PHP foreach 循环的隐藏输入值未正确传递给 JQuery - hidden input value from php foreach loop not properly passing to JQuery

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 循环没有问题，它获取正确。谢谢

更好的

方法：由于您正在迭代$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>

问题是你有多个输入元素具有name="imgid"。因此，当您查询 $（'input[name=imgid]'） jquery 解析所有 DOM 并创建一个具有 0 到 'n' 个输入标签的对象（n 是与您的查询匹配的元素数）。如果在此对象上使用 val（），它将始终返回对象中第 0 个元素的值。

溶液：

更改此内容

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

对此

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

尝试在 jquery 中更改此行：

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

自：

  var imgid = $(this+' :input').val();

我还会删除/更改 id 和 name 属性值 - 因为它们应该是唯一的

var imgid = $('input[name=imgid]');返回所有输入，但当您调用 val() 函数时，它只返回数组中第一项的值，在这种情况下始终相同。

您应该使用 for 循环或向当前的 foreach 循环添加索引：

<?php 
  $index = 0;
  foreach ($resultpics as $row1) { 
?>
  <div class="col-md-2">
    <a href="#" class="thumbnail" data-popup-open="popup-<?php echo $index; ?>" data-index="<?php echo $index; ?>">
    
    <input type="hidden" name="imgid_<?php echo $index; ?>" value="<?php echo $row1['img_id']; ?>">
    <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
    $index++;
  } 
?>

然后使用数据中的索引检索输入字段：

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