每次載入頁面時，選擇預設符合名稱的li列表

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線程，但找不到解決方案。 請幫幫我:(

到目前為止，我嘗試了match，find，filter函數，但都失敗了。

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>