在 Javascript 中的节点中添加和删除类

Question

我的页面中有一个滑块，滑块的指示器是动态的，它基于滑块的元素数量和主体宽度。

我的代码块是：

function setIndicators(){
  const indicator = document.createElement("div");
  indicator.className = "indicator active";
  indicatorContainer.innerHTML = "";
  for(let i = 0;i <= maxIndex; i++){
    indicatorContainer.appendChild(indicator.cloneNode(true));
  }
  updateIndicators();
}

工作正常。但我想显示活动指标，但我无法操纵元素类.

我试过这个：

function updateIndicators(index) {
  indicators.forEach((indicator) => {
    indicator.classList.remove("active");
  });
  let newActiveIndicator = indicators[index];
  newActiveIndicator.classList.add("active");
}

而且我无法使用索引或任何我 know/find 的任何指标来达到每个指标。另外，NodeList 似乎不是 HTML 元素。

您可能需要的其他东西：

const indicatorContainer = document.querySelector(".container-indicators");
const indicators = document.querySelectorAll(".indicator"); 
let maxScrollX = slider.scrollWidth - body.offsetWidth;
let baseSliderWidth = slider.offsetWidth;
let maxIndex = Math.ceil(maxScrollX / baseSliderWidth);

Answer 1

我建议以不同的方式使用指标。由于您的 HTML 未共享，我必须假设一些事情：

function clearAll() {
  const activeOnes = document.querySelectorAll(".active");
  activeOnes.forEach(function(activeOne) {
    activeOne.classList.remove("active");
  });
}

function chooseOne(index) {
  clearAll();
  const indicators = document.querySelectorAll(".indicator");
  indicators[index].classList.add("active");
}

* {
  font-family: 'Operator Mono', consolas, monospace;
}

.indicators {
  border: 2px solid #ccc;
  display: inline-block;
  width: auto;
  margin: 15px;
}

.indicators .indicator {
  padding: 15px;
  line-height: 1;
  background-color: #fff;
  flex-grow: 1;
  text-align: center;
  display: inline-block;
}

.indicator.active {
  background-color: #f90;
}

<div class="indicators"><div class="indicator">I1</div><div class="indicator">I2</div><div class="indicator">I3</div><div class="indicator">I4</div><div class="indicator">I5</div></div>
<button onclick="chooseOne(2); return false">Select I3</button>
<button onclick="chooseOne(3); return false">Select I4</button>

我会以不同的方式做这件事。

预览

在 Javascript 中的节点中添加和删除类

Add and remove classes from Node in Javascript

javascript

nodelist

在 Javascript 中的节点中添加和删除 类

Add and remove classes from Node in Javascript

javascript

nodelist

在 Javascript 中的节点中添加和删除类