来自 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();
});
相关文章:
- Foreach无法在php和Jquery中工作
- jQuery/Javascript foreach If/Else |如果为空(不执行任何操作)Else(显示forea
- 使用jQuery来foreach iframe-src,并通过函数获取ID和操作
- 从jquery foreach内部中断函数
- 只有第一个按钮在带有 Jquery 的 forEach 标签中有效
- 如何访问从 jstl foreach 到 jQuery 的枚举值
- Wordpress:Jquery.html函数现在在PHP foreach循环中执行
- json foreach array of arrays with jquery
- Foreach循环中的Jquery replaceWith
- (jQuery)foreach-loop 内的选项卡 ->一个页面上多个选项卡的问题
- jQuery .forEach() 导致错误,“undefined is not a function”
- Laravel foreach loop with jquery slidetoggle
- 来自 PHP foreach 循环的隐藏输入值未正确传递给 JQuery
- Jquery Bootstrap Dropdown在PHP中使用foreach循环填充的表中不起作用
- JQuery and foreach loops
- JQuery foreach count
- Jquery - . foreach()在IE8中不工作
- jQuery foreach guidance
- Jquery Foreach inside Foreach
- Jquery foreach 循环来设置值