国产av日韩一区二区三区精品,成人性爱视频在线观看,国产,欧美,日韩,一区,www.成色av久久成人,2222eeee成人天堂

每次載入頁(yè)面時(shí),選擇預(yù)設(shè)符合名稱(chēng)的li列表
P粉155128211
P粉155128211 2023-08-13 17:51:12
0
1
630
<p>我在我的電子商務(wù)網(wǎng)頁(yè)上的產(chǎn)品詳細(xì)頁(yè)面上建立了一個(gè)顏色按鈕清單。 當(dāng)我進(jìn)入頁(yè)面時(shí),我希望預(yù)設(shè)選擇匹配的顏色li按鈕。 每個(gè)產(chǎn)品頁(yè)面上都有一個(gè)特定的顏色名稱(chēng)(文字字串)可供使用。 以下是我的程式碼摘要。 </p> <pre class="brush:php;toolbar:false;"><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></pre> <p>我的想法是使用JavaScript來(lái)尋找/搜尋/匹配“a”標(biāo)籤的類(lèi)別名稱(chēng)中的顏色名稱(chēng),並強(qiáng)制將類(lèi)別“selected”添加到li中。 如您所見(jiàn),按鈕名稱(chēng)應(yīng)該透過(guò)其“a”標(biāo)籤而不是“l(fā)i”標(biāo)籤來(lái)識(shí)別。 我對(duì)編碼幾乎一無(wú)所知。 </p> <p>我查看了所有類(lèi)似的stackoverflow線(xiàn)程,但找不到解決方案。 請(qǐng)幫幫我:(</p> <p>到目前為止,我嘗試了match,find,filter函數(shù),但都失敗了。 </p>
P粉155128211
P粉155128211

全部回覆(1)
P粉032900484

您可以使用document.querySelector方法透過(guò)類(lèi)別名稱(chēng)尋找元素。

下面的程式碼假設(shè)「特定顏色名稱(chēng)」儲(chǔ)存在名為selectedColor的變數(shù)中。它也對(duì)您的<style>元素進(jìn)行了一些修正。您可以嘗試我的程式碼與您的程式碼進(jìn)行比較,以查看差異。

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>
最新下載
更多>
網(wǎng)站特效
網(wǎng)站源碼
網(wǎng)站素材
前端模板