Question

我的HTML包含多个.panorama divs，其中包含图片：

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

在jQuery中使用'this'设置图像src

1 个答案: