javascript 我尝试通过JS循环HTML元素,似乎有一个错误[关闭]

erhoui1w 于 2023-04-19 发布在 Java

关注(0)|答案(2)|浏览(108)

**已关闭。**此问题需要debugging details。当前不接受答案。

编辑问题以包括desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem。这将有助于其他人回答问题。
15小时前关门了。
Improve this question
我想创建一个滑块（输入标签），当用户滑动它时，它会接收输入。该值会被记录下来，并且在100个已经创建的矩形中，100个矩形的“值”会被着色。如果我将滑块设置为76，则76个矩形应该是阴影，所有其他矩形都应该是白色。

const slider = document.querySelector('.slider');
const carsContainer = document.querySelector('.cars-container');
const cars = carsContainer.querySelectorAll('.car');

slider.addEventListener('input', function () {
  const sliderValue = slider.value;
  console.log(sliderValue);

  for (let i = 0; i < sliderValue; i++) {
    cars[i].style.backgroundcolor = 'yellow';
  }
});

.slider-container {
  width: 80%;
  margin: 0 auto;
}

.slider {
  width: 100%;
}

.cars-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1fr);
  gap: 1rem;
  margin: 0 auto;
  width: 80%;
}

.car {
  --size: 6.2rem;
  width: var(--size);
  height: calc(var(--size) / 2);
  margin: 0 auto;
  background-color: #ccc;
  border-radius: 1rem;
  transition: transform 0.3s ease-in-out;
}

<div class="slider-container">
  <input type="range" min="1" max="100" value="5" class="slider" />
</div>

<div class="cars-container">
  <!-- 01 -->
  <div class="car"></div>
  .
  .
  .

  <!-- 100 -->
  <div class="car"></div>
</div>

JavaScript

来源：https://stackoverflow.com/questions/76037676/i-tried-looping-on-html-elements-through-js-there-seems-to-be-an-error

2条答案

按热度按时间

c0vxltue1#

下面是一个不需要重新切换内联background-color的CSS解决方案：
(Note :has()仍然是not very well supported）

slider.addEventListener('input', function () {
  // Remove current .max
  document.querySelector('.max')?.classList.remove('max');
  // Add .max to the chosen .car
  cars[slider.value - 1].classList.add('max');
});

.car:has(~ .max), .max {
  background-color: yellow;
}

/* Or */

.car {
  background-color: yellow;
}

.max ~ .div {
  background-color: #ddd;
}

试试看：

const carsContainer = document.querySelector('.cars-container');

for (let i = 0; i < 100; i++) {
  const car = document.createElement('div');
  car.classList.add('car');
  car.textContent = i + 1;
  carsContainer.appendChild(car);
}

const slider = document.querySelector('.slider');
const cars = carsContainer.querySelectorAll('.car');

slider.addEventListener('input', function() {
  document.querySelector('.max')?.classList.remove('max');
  cars[slider.value - 1].classList.add('max');
});

slider.dispatchEvent(new Event('input'));

.slider-container {
  width: 80%;
  margin: 1em auto;
}

.slider {
  width: 100%;
}

.cars-container {
  display: grid;
  grid-template-columns: repeat(10, 1fr);
  grid-template-rows: repeat(10, 1r);
  gap: 1rem;
  margin: 0 auto;
  width: 80%;
}

.car {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 1rem;
  aspect-ratio: 1 / 1;
  background-color: yellow;
}

.max ~ .car {
  background-color: #ccc;
}

<div class="slider-container">
  <input type="range" min="1" max="100" value="5" class="slider" />
</div>

<div class="cars-container"></div>

赞(0）回复(0）举报 2023-04-19

llmtgqce2#

当您降低滑块时，您需要将所有其余的矩形更改回白色，否则它们将保持之前的黄色。

slider.addEventListener('input', function () {
  const sliderValue = slider.value;
  console.log(sliderValue);

  for (let i = 0; i < sliderValue; i++) {
    cars[i].style.backgroundColor = 'yellow';
  }
  for (let i = sliderValue; i < 100; i++) {
    cars[i].style.backgroundColor = 'white';
  }
});

您在backgroundColor中也有一个错字;案件意义重大。

赞(0）回复(0）举报 2023-04-19

我来回答

javascript 我尝试通过JS循环HTML元素,似乎有一个错误[关闭]

2条答案

相关问题

热门标签

最新问答