Wählen Sie bei jedem Laden der Seite die li-Liste der standardmäßig übereinstimmenden Namen aus

Question

Ich habe auf der Produktdetailseite meiner E-Commerce-Webseite eine Liste mit Farbschaltflächen erstellt. Wenn ich die Seite betrete, möchte ich, dass die entsprechende Farbschaltfläche standardmäßig ausgewählt ist. Auf jeder Produktseite ist ein spezifischer Farbname (Textzeichenfolge) verfügbar. Unten finden Sie eine Zusammenfassung meines Codes.

<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>

<Stil>
.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 {grün;}
.color-wrap .blue {blau;}
</style>

Meine Idee ist, JavaScript zu verwenden, um den Farbnamen im Klassennamen des „a“-Tags zu finden/zu suchen/abzugleichen und zu erzwingen, dass die Klasse „selected“ zum li hinzugefügt wird. Wie Sie sehen, sollte der Schaltflächenname durch sein „a“-Tag und nicht durch sein „li“-Tag identifiziert werden. Ich weiß so gut wie nichts über Codierung.

Ich habe mir alle ähnlichen Stackoverflow-Threads angesehen, konnte aber keine Lösung finden. Bitte helfen Sie mir:(

Bisher habe ich die Funktionen „Abgleich“, „Suchen“ und „Filter“ ausprobiert, aber alle sind fehlgeschlagen.

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>