在每个页面加载的李列表中选择默认匹配名称

Question

我有一个为电子商务网页上的产品详细信息页面创建的颜色按钮列表。 当我进入页面时，我希望默认选择匹配颜色的 li 按钮。 每个产品页面都有一个可用的特定颜色名称（文本字符串）。 这是我的代码摘要。

<div class="color-wrap">
<ul>
  <li class="text"><a href="/link.." class="ivory" ></a></li>
  <li class="text"><a href="/link.." class="beige"></a></li>
  <li class="text selected"><a href="/link.." class="green"></a></li>
  <li class="text"><a href="/link.." class="blue"></a></li>
</ul>
</div>

<style>
.color-wrap {}
.color-wrap li a {}
.color-wrap li.selected a {border-color:red;}
.color-wrap .ivory {#fff;}
.color-wrap .beige {#eee;}
.color-wrap .green {green;}
.color-wrap .blue {blue;}
</style>

我的想法是使用javascript并让它在“a”标签的类名中查找/搜索/匹配颜色名称..并强制将“selected”类添加到li？ 正如您所看到的，按钮名称应该通过其“a”标签而不是“li”来识别。 我几乎没有编码知识。

我查看了所有与此类似的 stackoverflow 线程，但找不到解决方案。 请帮忙:(

到目前为止，我尝试了匹配、查找、过滤功能，但都失败了。

Answer 1

您可以使用

document.querySelector

方法按类名查找元素。

下面的代码假设“特定颜色名称”位于名为

selectedColor

的变量中。它还对您的

<style>

元素进行一些更正。您应该尝试将我的代码与您的代码进行比较，以便看到差异。

const selectedColor = "green";
document.querySelector(".color-wrap a." + selectedColor).parentNode.classList.add("selected");

.color-wrap {}
.color-wrap li a {}
.color-wrap li.selected a {border: red 1px solid;}
.color-wrap .ivory {color: #fff;}
.color-wrap .beige {color: #eee;}
.color-wrap .green {color: green;}
.color-wrap .blue {color: blue;}

<div class="color-wrap">
<ul>
  <li class="text"><a href="/link.." class="ivory">Ivory</a></li>
  <li class="text"><a href="/link.." class="beige">Beige</a></li>
  <li class="text"><a href="/link.." class="green">Green</a></li>
  <li class="text"><a href="/link.." class="blue">Blue</a></li>
</ul>
</div>