来自php foreach循环的隐藏输入值未正确传递给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();
});

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

HTML + PHP： p>

 ＆lt;？php foreach（  $ resultpics as $ row1）{？＆gt; 
＆lt; div class =“col-md-2”＆gt; 
＆lt; a href =“＃”class =“thumbnail”data-popup-open =“popup-1”  ＆lt;！ -  onclick =“showImg（＆lt;？php // echo $ row1 ['img_id'];？＆gt;  - ＆gt;）”＆gt; 
＆lt; input type =“hidden”name =“imgid”value  =“＆lt;？php echo $ row1 ['img_id'];？＆gt;”  id =“imgid”＆gt; 
＆lt; img id =“popimg”src =“＆lt;？php echo $ row1 ['img_path'];？＆gt; /＆lt;？php echo $ row1 ['img_id'] ;?  ＆gt; .jpg“alt =”Pulpit Rock“style =”width：200px; height：150px;“＆gt;  
＆LT; / A＆GT; 
＆LT; / DIV＆GT;  
＆lt;？php}？＆gt; 
  code>  pre> 
 
  JQuery： p> 
 
 
  $（'[data-popup- 打开]'）。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（）; 
}）; 
  code>  pre> 
 
  问题是 p> 
 var imgid  pre>的值总是相同的（在每个不同的地方它只给出了第一个图像的imgid）。 请注意，php foreach循环没有问题，它正确获取。 谢谢
  div>

答

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

答

Try changing this line in your jquery:

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

to:

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

i'd also remove/change the id and name attribute values - as they should be unique

答

Better approach: Since you're iterating over $resultpics to build HTML, then you need to use classes rather than ids, since duplicate IDs will be inconsistent HTML. Also, since you are using data attributes like data-popup-open make use of jQuery's .data() method, Do it this way:

<?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>

答

var imgid = $('input[name=imgid]'); returns all the inputs but when you call the val() function it only returns the value of the first item in the array which is always the same in this case.

You should either use a for-loop or add an index to your current foreach loop:

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

Then use the index in the data to retrieve the input field:

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

</div>

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

相关推荐