如何使用没有 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 => {

  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>

Answer 2

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

Answer 3

既然你想要所有的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")

Answer 4

你应该使用 getElementsByClassName

所以你的代码看起来像

document.getElementsByClassName("selected")

Answer 5

听起来你在找nth-child

例如

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

selectedElement.classList.add('selected');