Question

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

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

我可以使用例如“not”，然后我应该在X:not(#slider_01)中为“X”添加什么？

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

Answer 1

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

您可以使用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;
}

希望这有帮助。

Answer 2

由于问题用jQuery标记，您可以使用siblings函数。

以下是一个例子：

＆＃13;

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);
  })
})

＆＃13;

<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>

＆＃13;

如何选择其他范围滑块

2 个答案: