我的 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);
});
````
在 HTML 中直接更改 CSS 来定位 Id 并不是最好的主意。
相反,您可以结合 css 变量和属性的功能
style
来为每种尺寸定义一个图像。然后,您可以在 CSS 中访问这些变量并应用所有卡片之间共享的样式。
css 变量可用于在运行时修改样式,并且可直接在元素上设置。您可以识别 css 变量,因为它们以 开头
--
。请注意,我不熟悉 aem 或 sightly,因此以下示例仅用作演示。
首先,我们将添加一个类,用于将样式应用于所有卡片。在这里,我将使用
my-responsive-card
。然后,我们可以使用 style 属性定义 3 个 css 变量,每个图像大小一个。我们使用
--image-desktop
、--image-tablet
和--image-mobile
。这些变量可以像任何其他 CSS 属性一样定义:
现在,一旦每张卡片都有自己的 css 变量,我们就可以在样式表中访问它们,在那里我们可以使用媒体查询检查,就像您之前所做的那样。
要访问 css 变量,您需要使用
var()
css 函数。请注意,您的第一个媒体查询条件不是必需的,因为它是默认值。
您也可以使用 Sightly/HTL 变量来呈现 ID:
但对我来说,这真的很丑陋。我宁愿将背景图像存储为卡片上的数据属性,并在 CSS 中使用attr来设置背景图像,然后 CSS 可以保持通用并为所有卡片定义一次:
HTML 代码如下:
一旦您从 jQuery 代码中删除该类,您的代码就会起作用,
.test
因为您的 div 没有该类。同样在 CSS 中,您必须提供正确的背景图像路径才能使其正常工作。
一个示例工作代码:(使用硬代码 id 和背景颜色来显示它正在工作。)