**已关闭。**此问题为not reproducible or was caused by typos。它目前不接受回答。
此问题是由打印错误或无法再重现的问题引起的。虽然类似的问题可能是on-topic在这里,这一个是解决的方式不太可能帮助未来的读者。
6天前关门了。
Improve this question的
我有一个图片库,我想在用户单击锚标记时以模态显示图像。模态如预期的那样打开,但是,图像没有加载,似乎没有正确获得src。为什么以及如何获得每个图像的src并在模态中显示它?
下面是保存图像的位置和打开模态的a标签:
<div class="col-sm-6 col-md-6 col-lg-4 col-xl-4">
<div class="products-single fix">
<div class="box-img-hover imgBox">
<!-- <div class="type-lb">
<p class="sale">Sale</p>
</div> -->
<img src="images/img-pro-01.jpg" class="img-fluid " alt="Image">
<div class="mask-icon">
<ul class="thumb">
<li><a class="pop" href="#" data-toggle="tooltip" data-placement="right" data-toggle="modal" data-large-src="images/img-pro-01.jpg" title="View"><i class="fas fa-eye"></i></a></li>
<!-- <li><a href="#" data-toggle="tooltip" data-placement="right" title="Compare"><i class="fas fa-sync-alt"></i></a></li> -->
<!-- <li><a href="#" data-toggle="tooltip" data-placement="right" title="Add to Wishlist"><i class="far fa-heart"></i></a></li> -->
</ul>
<a class="cart" href="#">Add to Cart</a>
</div>
</div>
<div class="why-text">
<h4>Lorem ipsum dolor sit amet</h4>
<h5> $9.79</h5>
</div>
</div>
</div>
字符串
下面是modal:
<div class="modal fade" id="imagemodal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">Image preview</h4>
</div>
<div class="modal-body">
<img src="" id="imagepreview" style="width: 400px; height: 264px;" >
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
型
下面是简单的jQuery代码:
$(function() {
$('.pop').on('click', function() {
$('.imagepreview').attr('src', $(this).find('img').attr('src'));
$('#imagemodal').modal('show');
});
});
</script>
型
我错过了什么?
1条答案
按热度按时间nr9pn0ug1#
.imagepreview
应该是#imagepreview
,因为你试图查找一个ID,而不是一个类。如果它仍然无法加载,我打赌这就是问题所在:
字符串
我相信你会发现
$(this).find('img')
的console.log()
会返回一些空的东西,因为$(this)
在这个上下文中是$('.pop')
,而.pop
没有<img>
的子节点,所以你不应该在这里使用$(this)
。因为试图在.pop
中查找img
s将不会返回任何内容。如果可以的话,我会给予
<img src="images/img-pro-01.jpg">
它自己的ID,并以这种方式引用它。或者,你可以利用
.pop
的data-large-src
属性,然后利用它...因为它看起来是相同的图像。我建议广泛使用
console.log()
来查找和评估选择器是否能找到任何东西