<p>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. </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>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. </p> <p>J'ai regardé tous les threads de stackoverflow similaires, mais je n'ai pas trouvé de solution. S'il vous plaît, aidez-moi :(</p> <p>Jusqu'à présent, j'ai essayé les fonctions de correspondance, de recherche et de filtrage, mais elles ont toutes échoué. </p>

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>