javascript - 在jquery中使用 'this'设置图像src

Question

我的 HTML 由多个 .panorama div 组成，保存图像:

<div id="pan1" class="panorama">
    <img src="images/pano.jpg" alt="">
</div>

<div id="pan2" class="panorama">
    <img src="/images/alma.jpg" alt="">
</div>

我目前正在使用以下内容将图像 src 存储到变量

var imgSource = $(this).find(".panorama img").attr("src");

然后将上述内容放入以下代码中，以读取图像源:

if($('.panorama').length >0 ){
    v1 = pannellum.viewer('pan1', {
    "type": "equirectangular",
    "autoLoad": true,
    "pitch": -20,
    "hfov": 110,
    "panorama": imgSource
});

v2 = pannellum.viewer('pan2', {
    "type": "equirectangular",
    "autoLoad": true,
    "pitch": -20,
    "hfov": 110,
    "panorama": imgSource
});
}

但是，这只是返回 images/pano.jpg 两次并忽略 pannellum.org/images/alma.jpg

我是否错误地设置了$(this)？

Answer 1

假设您想要所有图像(因为您实际上并未指定此上下文中的this)。

您不需要 $(this).find(".panorama img") 您只想使用不带 this 的搜索词:

var img = $(".panorama img");

这将返回您的图像(复数)。您返回了多个图像，因此您需要迭代源:

$(document).ready(function() {
   var img = $('.panorama img');

  for(x = 0; x<img.length; x++)
  {
     var imgSource = $(img[x]).attr("src");
     console.log(imgSource);
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="pan1" class="panorama">
    <img src="images/pano.jpg" alt="">
</div>

<div id="pan2" class="panorama">
    <img src="/images/alma.jpg" alt="">
</div>