Setiap kali halaman dimuatkan, pilih senarai li nama padanan lalai

Question

Saya mencipta senarai butang warna pada halaman butiran produk pada halaman web e-dagang saya. Apabila saya memasuki halaman saya mahu butang li warna yang sepadan dipilih secara lalai. Nama warna tertentu (rentetan teks) tersedia pada setiap halaman produk. Di bawah ialah ringkasan kod saya.

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

<gaya>
.color-wrap {}
.color-wrap li a {}
.color-wrap li.memilih {warna sempadan:merah;}
.color-wrap .ivory {#fff;}
.color-wrap .beige {#eee;}
.color-wrap .hijau {hijau;}
.color-wrap .blue {biru;}
</style>

Idea saya ialah menggunakan JavaScript untuk mencari/mencari/memadankan nama warna dalam nama kelas teg "a" dan memaksa kelas "dipilih" untuk ditambahkan pada li. Seperti yang anda lihat, nama butang harus dikenal pasti dengan teg "a" dan bukannya teg "li". Saya tidak tahu apa-apa tentang pengekodan.

Saya melihat semua benang stackoverflow yang serupa tetapi tidak dapat mencari penyelesaian. Tolong bantu saya :(

Setakat ini, saya telah mencuba fungsi padanan, cari dan penapis, tetapi semuanya gagal.

Answer 1

Anda boleh menggunakan kaedah document.querySelector untuk mencari elemen mengikut nama kelas.

Kod di bawah menganggap "nama warna khusus" disimpan dalam elemen bernama selectedColor的变量中。它还对您的<style> dengan beberapa pembetulan. Anda boleh mencuba kod saya untuk membandingkan dengan kod anda untuk melihat perbezaannya.

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>