给两个相同class的元素一个唯一的id

Question

我在使用 Visual Composer 的 Wordpress 中工作，并且我有一个切换容器。本质上，我单击每个选项卡，下面的内容就会发生变化。我想通过 css 为每个选项卡分配不同的图像作为背景。然而，我已经实现了这一点，因为每个选项卡都具有相同的 class 名称（由视觉作曲家赋予它）图像是相同的。我需要弄清楚如何为每个选项卡提供自己的唯一 ID，以便为每个选项卡提供自己的背景图片 - 但由于我无法直接编辑 html，我想我需要这样做javascript。有谁知道我怎么能做到这一点？下面是 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>

和我的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;
}

我希望我解释清楚了。如果有不明白的地方请告诉我，我会再试一次。

Answer 1

我不熟悉 Wordpress，我不确定你是否可以添加 javascript，但如果可以，如果页面中只有那些 div 有 [=14]，下面的代码可以帮助你=] 'vce-toggle-container-tab':

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')";

Answer 2

您可以使用 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>

给两个相同class的元素一个唯一的id

Give two elements with the same class a unique id

javascript

jquery

css

wordpress

visual-composer