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 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循環中添加一個索引：

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

Answer 4

問題是您有多個具有名稱=“ imgid”的輸入元素。 因此，當您查詢$（'input [name = imgid]'）時， jquery會解析所有DOM並創建一個對象，該對象的輸入標記為0到'n'（ n是與您的查詢匹配的元素數 ）。 如果在此對象上使用val（），它將始終返回對象中第0個元素的值。

解：

改變這個

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

對此

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