如何选择其他范围滑块

How to select other range sliders

本文关键字：其他 范围 选择 何选择      更新时间：2023-09-26

我正在使用HTML的input范围对象制作一组滑块。当移动一个滑块时，其他滑块应将相同的量移动到相反的方向。

我可以用document.querySelector("#slider_02").value移动"slider_02"，但我需要移动所有其他滑块。

例如，我可以使用"not"，我应该在X:not(#slider_01)中为"X"放什么吗？

我的问题是如何选择其他滑块。

我的问题是如何选择其他滑块。

您可以使用document.querySelectorAll('slider:not')来获取所有滑块，并使用:not选择器（如slider:not('#slider_01')）获取除带有id="slider_01"滑块之外的所有滑块：

var sliders = document.querySelectorAll("slider:not('#slider_01')")

您应该遍历所有滑块并更改每个滑块的值：

var i;
for (i = 0; i < sliders.length; ++i) {
    sliders[i].value = X;
}

希望这有帮助。

由于问题被标记为jQuery，因此您可以使用兄弟姐妹函数。

下面是一个示例：

jQuery('.slider').on('input change', function() {
  _this = jQuery(this);
   // Perform any action you want
    var totalValue = parseFloat(_this.attr('max'));
   
   var leftValue = totalValue - jQuery(this).val();
   
  jQuery(this).siblings().each(function(i, e) {
   console.log(leftValue);
      jQuery(e).val(leftValue);
  })
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<input type="range" name="points" min="0" max="10" class='slider'><br>
<input type="range" name="points" min="0" max="10" class='slider'><br>
<input type="range" name="points" min="0" max="10" class='slider'><br>
<input type="range" name="points" min="0" max="10" class='slider'><br>

相关文章：