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>

Answer 2

尝试在jquery中更改此行：

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

为：

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

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

Answer 3

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

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

＆＃13;

<?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++;
  } 
?>

＆＃13;

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

＆＃13;

$('[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();
});

＆＃13;

Answer 4

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

解决方案：

更改此

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

到这个

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

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

4 个答案: