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

Question

我在更改此代码的值时遇到了麻烦。在这段代码中，我想用 JavaScript 代码设置的数字更改“selected”类。

简而言之，我想到达“li”项并给定值:4，它会将“selected”添加到相关类并删除前一个。

编辑:此外，它还应该相应地更改

1

值。

代码如下:

<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 => {
  if (item.getAttribute("data-val") == x){
      item.classList.add("selected");
  }
  else{
      item.classList.remove("selected");
  }
});

console.log(options);

<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">4</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>