我的 Sightly 中有以下 AEM 组件。使用 jQuery,如何将为 div 生成的 id 复制到三个 CSS 样式中?页面上会有多个这样的卡片,因此需要遍历每个卡片。
<div id="${card.id}" class="card flex-card radius-lg rel bgcolor ${card.cardTheme}"
role="region" tabindex="-1">
<sly data-sly-test.isImageTheme="${card.cardTheme == 'theme-light-bg-img' || card.cardTheme == 'theme-dark-bg-img'}">
<style data-sly-test="${isImageTheme}">
@media (min-width:1025px) {
#id-placeholder {
background-image: url(${card.imageLifestyle @ context='attribute'});
background-size: cover;
background-position: bottom right;
}
}
@media (min-width:768px) and (max-width:1024px) {
#id-placeholder {
background-image: url(${card.imageLifestyleTablet @ context='attribute'});
background-size: cover;
background-position: bottom right;
}
}
@media (max-width:767px) {
#id-placeholder {
background-image: url(${card.imageLifestyleMobile @ context='attribute'});
background-size: cover;
background-position: bottom right;
}
}
</style>
</sly>
这是我尝试过的最新 jQuery,但似乎没有什么能够在 CSS 中设置 id。
$(".card").each(function() {
var id = $(this).attr('id');
var style = $(this).find('style').html();
style = style.replace(/#id-placeholder/g, '#' + id);
$(this).find('style').html(style);
});
````