给具有相同类的两个元素一个唯一的id

Question

我在Wordpress和Visual Composer一起工作，我有一个切换容器。基本上，我点击每个选项卡，下面的内容就会发生变化。我想通过CSS为每个选项卡分配一个不同的图像作为背景。但是，我已经实现了这一点，因为每个选项卡都有相同的类名（由visual composer赋予它），所以图像是相同的。我需要弄清楚如何给每个选项卡一个唯一的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

您可以使用Nth child或Nth of-type选择器来实现，而不需要任何js，如下所示

null

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>