如何選擇其他範圍滑塊

Question

我正在使用HTML的input範圍對象製作滑塊組。當一個滑塊移動時，其他滑塊應該向相反的方向移動相同的量。

我可以移動「slider_02」document.querySelector("#slider_02").value但我需要移動所有其他滑塊。

我可以使用例如「不」，那麼我應該如何爲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函數。

下面是一個例子：

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>