3

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

谢谢;

4

6 回答 6

1

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

于 2020-09-28T18:55:03.067 回答
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>

于 2020-09-28T19:01:53.170 回答
0

你应该使用 getElementsByClassName

所以你的代码看起来像

document.getElementsByClassName("selected")
于 2020-09-28T18:48:01.353 回答
0

向 中添加一个 ID ul，然后选择第 n 个子元素。

const selected = 4
documentGetElementById(‘myUl’)
  .childNodes[selected-1]
  .classList
  .add(‘selected’)
于 2020-09-28T18:54:44.007 回答
0

由于您希望所有 li 元素都带有“选定”，然后修改特定元素的类。像这样的 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")
于 2020-09-28T18:50:30.480 回答
0

听起来你正在寻找nth-child

例如

var selectedElement = document.querySelector(".drop-down:nth-child(4)");
selectedElement.classList.add('selected');
于 2020-09-28T18:50:48.107 回答