时间戳

首页 > 解决方案 > 给同一个类的两个元素一个唯一的id

javascript - 给同一个类的两个元素一个唯一的id

问题描述

我正在使用 Visual Composer 在 Wordpress 中工作，并且我有一个切换容器。本质上，我单击每个选项卡，下面的内容会发生变化。我想通过 css 为每个选项卡分配不同的图像作为背景。但是我已经实现了这一点，因为每个选项卡都有相同的类名（由视觉作曲家给出），所以图像是相同的。我需要弄清楚如何为每个选项卡提供自己的唯一 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;
}

我希望我能清楚地解释这一点。如果不明白请告诉我，我会再试一次。

标签： javascriptjquerycsswordpressvisual-composer

解决方案

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

推荐阅读