时间戳

首页 > 解决方案 > 如何使用没有 ID 的 JavaScript 更改类？

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

问题描述

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

简而言之，我想达到“li”项目并给出：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>

谢谢;

标签： javascript

解决方案

使用匹配类和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;
}
<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;">
      <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>

推荐阅读