ページが読み込まれるたびに、デフォルトの一致する名前のリストを選択します。

Question

<p>電子商取引 Web ページの商品詳細ページにカラー ボタンのリストを作成しました。 ページに入るときに、デフォルトで一致する色の li ボタンが選択されるようにしたいと思います。 特定の色の名前（文字列）は各商品ページに記載されています。 以下は私のコードの概要です。 </p> <pre class="brush:php;toolbar:false;"><div class="color-wrap">

<li class="text"><a href="/link.." class="ivory" ></a></li> <li class="text"><a href="/link.." class="ベージュ"></a></li> <li class="選択されたテキスト"><a href="/link.." class="green"></a></li> <li class="text"><a href="/link.." class="blue"></a></li> </ul> </div> <スタイル> .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 {緑;} .color-wrap .blue {青;} </style></pre> <p>私のアイデアは、JavaScript を使用して「a」タグのクラス名内の色名を検索/検索/照合し、「selected」クラスを強制的に li に追加することです。 ご覧のとおり、ボタン名は「li」タグではなく「a」タグで識別する必要があります。 私はコーディングについてはほとんど何も知りません。 </p> <p>同様の stackoverflow スレッドをすべて調べましたが、解決策が見つかりませんでした。 助けてください:(</p> <p>これまで、match、find、filter 関数を試してきましたが、すべて失敗しました。 </p>

Answer 1

document.querySelector メソッドを使用して、クラス名で要素を検索できます。

以下のコードは、「特定の色の名前」が

selectedColor という名前の変数に格納されていることを前提としています。また、<style> 要素にもいくつかの修正が加えられます。私のコードをあなたのコードと比較して違いを確認してください。

リーリー リーリー リーリー