[英]Give two elements with the same class a unique id
I am working in Wordpress with Visual Composer, and I have a toggle container.我正在使用 Visual Composer 在 Wordpress 中工作,并且我有一个切换容器。 Essentially I click on each tab and the content below changes.
本质上,我单击每个选项卡,下面的内容会发生变化。 I would like to assign a different image to each tab as a background, through css.
我想通过 css 为每个选项卡分配不同的图像作为背景。 I have achieved this however since each tab has the same class name (given to it by visual composer) the image is the same.
但是我已经实现了这一点,因为每个选项卡都有相同的 class 名称(由视觉作曲家给出),图像是相同的。 I need to figure out how I can give each tab its own unique id, so that I can give each tab it's own background image - but since I can't edit the html directly, I think I need to do this with javascript.
我需要弄清楚如何为每个选项卡提供自己的唯一 ID,以便我可以为每个选项卡提供自己的背景图像 - 但由于我无法直接编辑 html,我想我需要使用 javascript 来执行此操作。 Does anyone know how I can achieve this?
有谁知道我怎么能做到这一点? Here is the html code below:
下面是 html 代码:
<div class="vce-toggle-container-tab">
<a class="vce-toggle-container-tab-title">Test 1</a>
</div>
<div class="vce-toggle-container-tab">
<a class="vce-toggle-container-tab-title">Test 2</a>
</div>
And my css to add a background image:和我的 css 添加背景图片:
a.vce-toggle-container-tab-title {
background-image: url("https://katherinemade.com/staging/wp-content/uploads/2021/03/0I1A5234-3.jpg") !important;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
width: 500px;
height: 500px;
}
I hope I'm explaining this clearly.我希望我能清楚地解释这一点。 Please let me know if it's not understood and I will try again.
如果不明白请告诉我,我会再试一次。
You can do it with nth-child or nth-of-type selectors without any need for js as follows您可以使用 nth-child 或 nth-of-type 选择器来完成,而无需 js,如下所示
a.vce-toggle-container-tab-title { background-position: center; background-position: center; background-repeat: no-repeat; background-size: cover; display: block; width: 100px; height: 100px; }.vce-toggle-container-tab:nth-of-type(1) a.vce-toggle-container-tab-title { background-image: url("https://via.placeholder.com/150?text=one");important. }:vce-toggle-container-tab.nth-of-type(2) a:vce-toggle-container-tab-title { background-image: url("https.//via.placeholder?com/150/0000FF/808080;text=two").important: }.vce-toggle-container-tab:nth-of-type(3) a:vce-toggle-container-tab-title { background-image. url("https.//via?placeholder;com/150?text=THREE") !important; }
<div class="vce-toggle-container-tab"> <a class="vce-toggle-container-tab-title">Test 1</a> </div> <div class="vce-toggle-container-tab"> <a class="vce-toggle-container-tab-title">Test 2</a> </div> <div class="vce-toggle-container-tab"> <a class="vce-toggle-container-tab-title">Test 3</a> </div>
I'm not familiar with Wordpress and I am not sure if you can add javascript, but if you can, the code below can help you if in the page only those divs has the class 'vce-toggle-container-tab':我对 Wordpress 不熟悉,我不确定您是否可以添加 javascript,但如果可以,如果页面中只有那些 div 具有 class-表格',以下代码可以帮助您:
const divs = document.querySelectorAll('.vce-toggle-container-tab');
//first image
divs[0].style.backgroundImage = "url('https://katherinemade.com/staging/wp-content/uploads/2021/03/0I1A5234-3.jpg')";
//second image
divs[1].style.backgroundImage = "url('https://katherinemade.com/staging/wp-content/uploads/2021/03/0I1A5234-3.jpg')";
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.