Chaque fois que la page se charge, sélectionnez la liste des noms correspondants par défaut

Question

J'ai créé une liste de boutons de couleur sur la page de détails du produit sur ma page Web de commerce électronique. Lorsque j'entre dans la page, je souhaite que le bouton li de couleur correspondante soit sélectionné par défaut. Un nom de couleur spécifique (chaîne de texte) est disponible sur chaque page produit. Vous trouverez ci-dessous un résumé de mon code.

<div class="color-wrap">
<ul>
  <li class="text"><a href="/link.." class="ivoire" ></a></li>
  <li class="text"><a href="/link.." class="beige"></a></li>
  <li class="texte sélectionné"><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 un {}
.color-wrap li.selected un {border-color:red;}
.color-wrap .ivoire {#fff;}
.color-wrap .beige {#eee;}
.color-wrap .green {vert;}
.color-wrap .blue {bleu;}
</style>

Mon idée est d'utiliser JavaScript pour trouver/rechercher/faire correspondre le nom de la couleur dans le nom de classe de la balise "a" et forcer l'ajout de la classe "sélectionnée" au li. Comme vous pouvez le constater, le nom du bouton doit être identifié par sa balise « a » plutôt que par sa balise « li ». Je ne connais presque rien au codage.

J'ai regardé tous les threads de stackoverflow similaires, mais je n'ai pas trouvé de solution. S'il vous plaît, aidez-moi :(

Jusqu'à présent, j'ai essayé les fonctions de correspondance, de recherche et de filtrage, mais elles ont toutes échoué.

Answer 1

Vous pouvez utiliser la méthode document.querySelector pour rechercher des éléments par nom de classe.

Le code ci-dessous suppose que le "nom de couleur spécifique" est stocké dans un élément nommé selectedColor的变量中。它还对您的<style> avec quelques corrections. Vous pouvez essayer mon code pour comparer avec le vôtre pour voir la différence.

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>