主页 / 问题 / 1270807
Accepted
Monkey Mutant
Asked:2022-04-16 07:37:46 +0000 UTC2022-04-16 07:37:46 +0000 UTC

为什么两个滑块同时变化？

  • 772

我在一页上做两个或多个范围滑块，但发生了我不明白的情况！当您更改一个滑块时，它会更改另一个

分配一个id会导致代码增长，但是我希望一个类似的功能也有同样的效果，就是页面上有两个或多个滑块

如何使 2> 范围在页面上工作？

document.querySelectorAll(".custom .range").forEach(function (elem){
  let data = document.querySelectorAll(".custom .view .data");
  data.forEach(function (values){
    elem.addEventListener("input", function (){
      values.innerHTML = this.value + "%"
    })
  })
})
<div class="custom">
  <div class="view"><div class="data">1%</div> </div>
  <input type="range" class="range" min="1" max="100" value="1">
</div>

<div class="custom">
  <div class="view"><div class="data">3%</div></div>
  <input type="range" class="range" min="1" max="100" value="3">
</div>

这个实现在 html + css 中可行吗？

我会很感激一个例子

javascript

1 个回答

  1. Best Answer

    您每次都用百分比遍历所有元素。这个选项解决了这个问题，但我认为这不是最好的选择。

    document.querySelectorAll(".custom").forEach(function(elem) {
  let data = elem.querySelector(".data");

  elem.querySelector('.range').addEventListener("input", function() {
    data.innerHTML = this.value + "%"
  })
})
    <div class="custom">
  <div class="view">
    <div class="data">1%</div>
  </div>
  <input type="range" class="range" min="1" max="100" value="1">
</div>

<div class="custom">
  <div class="view">
    <div class="data">3%</div>
  </div>
  <input type="range" class="range" min="1" max="100" value="3">
</div>

    • 3

相关问题