Question

我正在尝试使用.prop('currentSrc')来获取所显示图像的当前 srcset（取决于浏览器大小）。

但是，Jquery似乎无法从以下代码中的html <picture>元素获取srcset的值。 newBackground的值不断返回未定义。

jQuery是否可以使用.prop（'currentSrc'）从picture元素获取当前使用的srcset？如果没有，还有更好的方法吗？

var photos = $("picture").toArray();
window.setInterval(changePhoto, 6000);

function changePhoto() {
  photos.push(photos.shift());
  var newBackground = photos[0];
  console.log(newBackground); // logs <picture> element
  newBackground = $(newBackground).prop('currentSrc');
  console.log(newBackground); // logs undefined
  $(".banner").css("background-image", "url(" + newBackground + ")");
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<picture>
  <source media="(min-width: 901px)" srcset="oldmanfull.jpg">
  <source media="( (min-width : 515px) and (max-width : 900px) )" srcset="oldmantablet.jpg">
  <img src="oldmantablet.jpg" />
</picture>
<picture>
  <source media="(min-width: 901px)" srcset="hatman.jpg">
  <source media="( (min-width : 515px) and (max-width : 900px) )" srcset="hatmantablet.jpg">
  <img src="hatmantablet.jpg" />
</picture>

Answer 1

首先，您需要向<img>中添加一个<picture>元素。这是将要显示的实际图像，如果<source>标签对特定设备都不起作用，则其src属性指定一个后备图像。

<picture>
  <source media="(min-width: 901px)" srcset="oldmanfull.jpg">
  <source media="( (min-width : 515px) and (max-width : 900px) )" srcset="oldmantablet.jpg">
  <img src="fallback_image.png"></img>
</picture>

第二，currentSrc元素位于<img>上，而不位于<picture>上，因为<picture>元素通过动态设置其子元素{{ 1}}。因此，您的jQuery选择应该挖掘src标记本身：

<img>

进行了这些更正后，此代码应该可以工作：

<img>

也许值得一提的是$('picture>img')是一个普通的javascript属性，因此您无需jQuery就可以轻松访问它：

var photos = $("picture>img").toArray();
window.setInterval(changePhoto, 6000);

function changePhoto() {
  photos.push(photos.shift());
  var newBackground = photos[0];
  console.log(newBackground); // logs <img> element
  newBackground = $(newBackground).prop('currentSrc');
  console.log(newBackground); // logs undefined
  $(".banner").css("background-image", "url(" + newBackground + ")");
}

jQuery .prop（'currentSrc'）在<picture>元素上找不到srcset属性

1 个答案: