Я пытаюсь присвоить значение атрибутов данных одним и тем же элементам srcset или src
var is_chrome = (typeof window.chrome === 'object' && navigator.appVersion.indexOf('Edge') === -1);
if ($('.image-browsers').length > 0) {
if (is_chrome) {
var a = $('.mobileImages').attr('data-mobileImage'),
b = $('.desktop-images').attr('data-mobileWebp');
$('.mobileImages').attr('srcset', a.val());
$('.desktop-images').attr('src', b.val());
}
else {
var c = $('.mobileImages').attr('mobileImage'),
d = $('.desktop-images').attr('desktopImage');
$('.mobileImages').attr('srcset', c.val());
$('.desktop-images').attr('src', d.val());
}
}
<picture class = "image-browsers">
<isif condition = "${mobileImage}">
<source class = "mobileImages" srcset = "" media = "(max-width: 768px)" data-mobileImage = "test.jpg" data-mobileWebp = "test2.webp">
</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 = "test3.jpg" data-desktopWebp = "test4.webp">
</isif>
</picture>
Не уверен, где я ошибаюсь. Если я удалю val (), ошибок не будет. Если я добавлю его, он покажет ошибку.
Я бы посоветовал использовать функцию data (...).
Функция .data (...) возвращает объект (в данном случае строку), который не является элементом HTML и, следовательно, не имеет метода val. Посмотрите данные jQuery
Функция .attr (...) возвращает объект строкового типа, у которого нет метода val. jQuery attr
OP не использует data()
. Также data()
возвращает тот же тип данных, который вы в него поместили, а не всегда строку. Вы похоже запутались с attr()
Спасибо - я имел в виду, что он должен использовать данные;), а не проверять браузер.
Ребята, проверьте мой ответ ниже. Просто хочу знать, почему первый атрибут данных не работает
используйте .data ('desktopImage'); не .data ('data-desktopImage');
Это сработало:
if (is_chrome) {
var a = $('.mobileImages').attr('data-mobileWebp'),
b = $('.desktop-images').attr('data-desktopWebp');
$('.mobileImages').attr('srcset', a);
$('.desktop-images').attr('src', b);
}
else {
var c = $('.mobileImages').attr('data-mobileImage'),
d = $('.desktop-images').attr('data-desktopImage');
$('.mobileImages').attr('srcset', c);
$('.desktop-images').attr('src', d);
}
Не уверен, почему это не сработало:
if (is_chrome) {
var a = $('.mobileImages').data('mobileWebp'),
b = $('.desktop-images').data('desktopWebp');
$('.mobileImages').attr('srcset', a);
$('.desktop-images').attr('src', b);
}
else {
var c = $('.mobileImages').data('mobileImage'),
d = $('.desktop-images').data('data-desktopImage');
$('.mobileImages').attr('srcset', c);
$('.desktop-images').attr('src', d);
}
Здесь есть несколько проблем. 1) Не используйте обнюхивание браузера 2)
attr()
возвращает строку, поэтому вызовval()
вызовет ошибку 3) используйтеdata()
для получения атрибутов данных, а неattr()