如何使用没有 ID 的 JavaScript 更改类？

Question

我在更改此代码的值时遇到了麻烦。在这段代码中，我想用 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>&nbsp;

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

Answer 1

let x = document.querySelector(".select-box").innerText;let options = document.querySelectorAll("li.option-item");options.forEach(item => {&nbsp; if (item.getAttribute("data-val") == x){&nbsp; &nbsp; &nbsp; item.classList.add("selected");&nbsp; }&nbsp; else{&nbsp; &nbsp; &nbsp; item.classList.remove("selected");&nbsp; }});console.log(options);<div class="select-container xl" id="_channel">&nbsp; <label class="select-title T_channel xl">Channel:</label>&nbsp;&nbsp; <div class="tp-select">&nbsp; <div class="select-box">4</div>&nbsp; <div class="select-icon-container"><span class="select-icon"></span></div>&nbsp; &nbsp; <ul class="drop-down" style="max-height: 204.55px; display: none;">&nbsp; &nbsp; &nbsp; <li style="cursor: default; border-bottom: 1px solid rgb(204, 204, 204);"></li>&nbsp; &nbsp; &nbsp; <li data-val="0" class="option-item">Auto</li>&nbsp; &nbsp; &nbsp; <li data-val="1" class="option-item selected">1</li>&nbsp; &nbsp; &nbsp; <li data-val="2" class="option-item">2</li>&nbsp; &nbsp; &nbsp; <li data-val="3" class="option-item">3</li>&nbsp; &nbsp; &nbsp; <li data-val="4" class="option-item">4</li>&nbsp; &nbsp; &nbsp; <li data-val="5" class="option-item">5</li>&nbsp; &nbsp; &nbsp; <li data-val="6" class="option-item">6</li>&nbsp; &nbsp; &nbsp; <li data-val="7" class="option-item">7</li>&nbsp; &nbsp; &nbsp; <li data-val="8" class="option-item">8</li>&nbsp; &nbsp; &nbsp; <li data-val="9" class="option-item">9</li>&nbsp; &nbsp; &nbsp; <li data-val="10" class="option-item">10</li>&nbsp; &nbsp; &nbsp; <li data-val="11" class="option-item">11</li>&nbsp; &nbsp; &nbsp; <li data-val="12" class="option-item">12</li>&nbsp; &nbsp; &nbsp; <li data-val="13" class="option-item">13</li>&nbsp; &nbsp; </ul>&nbsp; </div></div>

Answer 2

使用匹配类和data-val值的查询选择器。// Remove the old selected itemdocument.querySelectorAll(".option-item.selected").forEach(item => item.classList.remove("selected"));// Select the desired itemdocument.querySelector(".option-item[data-val='4']").classList.add("selected");.option-item.selected {&nbsp; color: red;}<div class="select-container xl" id="_channel">&nbsp; <label class="select-title T_channel xl">Channel:</label>&nbsp;&nbsp; <div class="tp-select"><div class="select-box">1</div>&nbsp; <div class="select-icon-container"><span class="select-icon"></span></div>&nbsp; &nbsp; <ul class="drop-down" style="max-height: 204.55px;">&nbsp; &nbsp; &nbsp; <li style="cursor: default; border-bottom: 1px solid rgb(204, 204, 204);"></li>&nbsp; &nbsp; &nbsp; <li data-val="0" class="option-item">Auto</li>&nbsp; &nbsp; &nbsp; <li data-val="1" class="option-item selected">1</li>&nbsp; &nbsp; &nbsp; <li data-val="2" class="option-item">2</li>&nbsp; &nbsp; &nbsp; <li data-val="3" class="option-item">3</li>&nbsp; &nbsp; &nbsp; <li data-val="4" class="option-item">4</li>&nbsp; &nbsp; &nbsp; <li data-val="5" class="option-item">5</li>&nbsp; &nbsp; &nbsp; <li data-val="6" class="option-item">6</li>&nbsp; &nbsp; &nbsp; <li data-val="7" class="option-item">7</li>&nbsp; &nbsp; &nbsp; <li data-val="8" class="option-item">8</li>&nbsp; &nbsp; &nbsp; <li data-val="9" class="option-item">9</li>&nbsp; &nbsp; &nbsp; <li data-val="10" class="option-item">10</li>&nbsp; &nbsp; &nbsp; <li data-val="11" class="option-item">11</li>&nbsp; &nbsp; &nbsp; <li data-val="12" class="option-item">12</li>&nbsp; &nbsp; &nbsp; <li data-val="13" class="option-item">13</li>&nbsp; &nbsp; </ul>&nbsp; </div></div>

Answer 3

既然你想要所有的li元素都带有“selected”，然后修改特定元素的类。像这样的 js 代码应该可以工作。//remove the selected class first&nbsp;document.querySelector("selected").className = "option-item"//get all li items with class option-itemlistOfLi = document.querySelectorAll("li.option-item")selectedElement = listOfLi.filter(e=>e.data-val==4)//whatever value you want to match it withselectedElement.className = whatever classes you want to assign.(eg."selected")

Answer 4

你应该使用 getElementsByClassName所以你的代码看起来像document.getElementsByClassName("selected")

Answer 5

听起来你在找nth-child例如var selectedElement = document.querySelector(".drop-down:nth-child(4)");selectedElement.classList.add('selected');