首頁猿問如何使用沒有 ID 的...

如何使用沒有 ID 的 JavaScript 更改類？

JavaScript

長風秋雁 2023-04-01 17:19:12

我在更改此代碼的值時遇到了麻煩。在這段代碼中，我想用 JavaScript 代碼設置的數字更改“selected”類。簡而言之，我想到達“li”項并給出 say: 4 作為值，它會將“selected”添加到相關類并刪除前一個。編輯：此外，它還應該相應地更改 <div class="select-box">1</div> 值。這是代碼：<div class="select-container xl" id="_channel"> <label class="select-title T_channel xl">Channel:</label>  <div class="tp-select"> <div class="select-box">1</div> <div class="select-icon-container"><span class="select-icon"></span></div> <ul class="drop-down" style="max-height: 204.55px; display: none;"> <li style="cursor: default; border-bottom: 1px solid rgb(204, 204, 204);"></li> <li data-val="0" class="option-item">Auto</li> <li data-val="1" class="option-item selected">1</li> <li data-val="2" class="option-item">2</li> <li data-val="3" class="option-item">3</li> <li data-val="4" class="option-item">4</li> <li data-val="5" class="option-item">5</li> <li data-val="6" class="option-item">6</li> <li data-val="7" class="option-item">7</li> <li data-val="8" class="option-item">8</li> <li data-val="9" class="option-item">9</li> <li data-val="10" class="option-item">10</li> <li data-val="11" class="option-item">11</li> <li data-val="12" class="option-item">12</li> <li data-val="13" class="option-item">13</li> </ul> </div></div>

查看完整描述

5 回答

心有法竹

TA貢獻1866條經驗獲得超5個贊

let x = document.querySelector(".select-box").innerText;

let options = document.querySelectorAll("li.option-item");

options.forEach(item => {

if (item.getAttribute("data-val") == x){

item.classList.add("selected");

}

else{

item.classList.remove("selected");

}

});

console.log(options);

<label class="select-title T_channel xl">Channel:</label> 

</ul>

</div>

反對回復 2023-04-01

蠱毒傳說

TA貢獻1895條經驗獲得超3個贊

使用匹配類和data-val值的查詢選擇器。

// Remove the old selected item

document.querySelectorAll(".option-item.selected").forEach(item => item.classList.remove("selected"));

// Select the desired item

document.querySelector(".option-item[data-val='4']").classList.add("selected");

.option-item.selected {

color: red;

}

<label class="select-title T_channel xl">Channel:</label> 

</ul>

</div>

反對回復 2023-04-01

九州編程

TA貢獻1785條經驗獲得超4個贊

既然你想要所有的li元素都帶有“selected”，然后修改特定元素的類。像這樣的 js 代碼應該可以工作。

//remove the selected class first

document.querySelector("selected").className = "option-item"

//get all li items with class option-item

listOfLi = document.querySelectorAll("li.option-item")

selectedElement = listOfLi.filter(e=>e.data-val==4)//whatever value you want to match it with

selectedElement.className = whatever classes you want to assign.(eg."selected")

反對回復 2023-04-01

臨摹微笑

TA貢獻1982條經驗獲得超2個贊

你應該使用 getElementsByClassName

所以你的代碼看起來像

document.getElementsByClassName("selected")

反對回復 2023-04-01

慕斯王

TA貢獻1864條經驗獲得超2個贊

聽起來你在找nth-child

例如

var selectedElement = document.querySelector(".drop-down:nth-child(4)");

selectedElement.classList.add('selected');

反對回復 2023-04-01

5 回答
0 關注
171 瀏覽

關注

添加回答

舉報

0/150

提交

取消

亚洲在线久爱草,狠狠天天香蕉网,天天搞日日干久草,伊人亚洲日本欧美

熱搜

最近搜索清空

如何使用沒有 ID 的 JavaScript 更改類？

如何使用沒有 ID 的 JavaScript 更改類？

5 回答

添加回答

如何使用沒有 ID 的 JavaScript 更改類？