JQuery .prop ('currentSrc') не находит свойство srcset в элементе <picture>

Я пытаюсь использовать, .prop('currentSrc')чтобы установить текущее <изображение> (зависит от размера браузера) отображаемого изображения.

Однако Jquery, похоже, не может получить значение srcset из элемента html в приведенном ниже коде. Значение newBackground продолжает оставаться неопределенным.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 + ")"); }

Может ли jquery использовать .prop (' <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) и (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) и (max-width: 900px))" srcset = "hatmantablet.jpg" > <img src = "hatmantablet.jpg" /> </ picture> '), чтобы получить используемый в настоящее время srcset из элемента изображения? Если нет, есть ли лучший способ? 

<img>
<picture>

javascript,jquery,html5,

-1

Ответов: 1

1

Во-первых, вам нужно добавить <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>, а не srcпотому, что <img>элемент работает путем динамической настройки srcего дочернего элемента <img>. Поэтому ваш выбор jQuery должен копаться для самого тега:$('picture>img')

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 + ")");
}

С этими исправлениями этот код должен работать:

currentSrc

И, возможно, стоит упомянуть, что currentSrcэто простое свойство javascript, поэтому вы можете легко получить к нему доступ без jQuery:

newBackground = newBackground.currentSrc;
JavaScript, JQuery, html5,
Похожие вопросы
Яндекс.Метрика