为单独的图片srcset和img src指定属性

Question

当网站上只有一个图片标签时，我下面的代码就可以工作了。当他们在后台添加图像时，会自动动态创建图片标签。因此，我将数据属性的值分配给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>

Answer 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);
});
}