Назначение атрибута для отдельных изображений srcset и img src

Мой код ниже работает, когда на веб-сайте есть только 1 тег изображения. Тег изображения автоматически создается динамически, когда они добавляют изображения в бэкэнд. Итак, я присваиваю значение атрибута данных img src, а другое - источнику srcset.

Когда имеется несколько изображений, все теги изображений имеют сам первый источник изображения. Я хочу srcset или src одного и того же элемента, а не другого элемента изображения. Я бью головой, заранее спасибо за ваш вклад.

var is_chrome = (typeof window.chrome === 'object' && navigator.appVersion.indexOf('Edge') === -1);

if ($('.image-browsers').length > 0) {
  if (is_chrome) {
    var mobWebp = $('.mobileImages').attr('data-mobileWebp'),
      deskWebp = $('.desktop-images').attr('data-desktopWebp');
    $('.mobileImages').attr('srcset', mobWebp);
    $('.desktop-images').attr('src', deskWebp);
  } else {
    var mobImage = $('.mobileImages').attr('data-mobileImage'),
      deskImage = $('.desktop-images').attr('data-desktopImage');
    $('.mobileImages').attr('srcset', mobImage);
    $('.desktop-images').attr('src', deskImage);
  }
}

<picture class = "image-browsers">
  <isif condition = "${mobileImage}">
    <source class = "mobileImages" srcset = "" media = "(max-width: 768px)" data-mobileImage = "${mobileImage ? mobileImage.getURL() : ''}" data-mobileWebp = "${mobilewebpImage ? mobilewebpImage.getURL() : ''}">
  </isif>
  <isif condition = "${desktopImage}">
    <img class = "desktop-images" src = "" alt = "${'previewName' in contentAsset.custom && contentAsset.custom.previewName != null ? contentAsset.custom.previewName : '' }" title = "${'previewName' in contentAsset.custom && contentAsset.custom.previewName != null ? contentAsset.custom.previewName : '' }"
      data-desktopImage = "${desktopImage ? desktopImage.getURL() : ''}" data-desktopWebp = "${desktopwebpImage ? desktopwebpImage.getURL() : ''}">
  </isif>
</picture>

jquery

31.10.2018 13:25

Как конвертировать HTML в PDF с помощью jsPDF

В этой статье мы рассмотрим, как конвертировать HTML в PDF с помощью jsPDF. Здесь мы узнаем, как конвертировать HTML в PDF с помощью javascript.

Перейти к ответу Данный вопрос помечен как решенный

Ответы 1

Ответ принят как подходящий

Вы должны запустить свой код для каждого элемента .image-browsers

var is_chrome = (typeof window.chrome === 'object' && navigator.appVersion.indexOf('Edge') === -1);
var imageBrowsers = $('.image-browsers');

if (imageBrowsers.length > 0) {
  imageBrowsers.each(function(index, picture) {
    var mobileImage,
      desktopImage;

    if (is_chrome) {
      mobileImage = $('.mobileImages', picture).attr('data-mobileWebp');
      desktopImage = $('.desktop-images', picture).attr('data-desktopWebp')
    } else {
      mobileImage = $('.mobileImages', picture).attr('data-mobileImage');
      desktopImage = $('.desktop-images', picture).attr('data-desktopImage')
    }

    $('.mobileImages', picture).attr('srcset', mobileImage);
    $('.desktop-images', picture).attr('src', desktopImage);
  });
}

Не работает. Не знаю почему. Пожалуйста, проверьте этот сайт dev07-na01-arden.demandware.net/s/ardene/ca/en/homepage Имя файла, если вы пытаетесь отладить: hero-carousel.js

— 31.10.2018 14:00

@NaveenLBhandari действительно. К сожалению, забыл, что .each в jquery принимает индекс в качестве первого параметра. Просто замените imageBrowsers.each(function( picture) { на imageBrowsers.each(function(index, picture) {. Обновленный ответ.

— 31.10.2018 14:28

Вы самые лучшие. Спасибо.

— 31.10.2018 14:51

31.10.2018 13:45