jquery 在Bootsrap模式下打开图像时,不会加载图像src [已关闭]

ddrv8njm  于 2023-08-04  发布在  jQuery
关注(0)|答案(1)|浏览(82)

**已关闭。**此问题为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">&times;</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>


我错过了什么?

nr9pn0ug

nr9pn0ug1#

.imagepreview应该是#imagepreview,因为你试图查找一个ID,而不是一个类。
如果它仍然无法加载,我打赌这就是问题所在:

$(this).find('img').attr('src')

字符串
我相信你会发现$(this).find('img')console.log()会返回一些空的东西,因为$(this)在这个上下文中是$('.pop'),而.pop没有<img>的子节点,所以你不应该在这里使用$(this)。因为试图在.pop中查找img s将不会返回任何内容。
如果可以的话,我会给予<img src="images/img-pro-01.jpg">它自己的ID,并以这种方式引用它。
或者,你可以利用.popdata-large-src属性,然后利用它...因为它看起来是相同的图像。
我建议广泛使用console.log()来查找和评估选择器是否能找到任何东西

相关问题