座標兩個基於數組的水平範圍輸入

我有一個應用程序，其中兩個「滑塊」（HTML範圍輸入）相互作用，更新一個更新另一個。我正試圖圍繞我所需要做的最好的高級別方法進行討論。最初，滑塊被更新爲「16」的一致整數。例如：座標兩個基於數組的水平範圍輸入

範圍1個

<input id="range-2" type='range' min='1' max='7' step='1' />

範圍2

<input type='range' min='0' max='96' step='16' id="range-3" />

最初，更新任一滑塊的增量的步驟方面直接相關。例如，將第一個滑塊從'1'更新爲'4'將使第二個滑塊3也升高，從0到48.現在，客戶端根據用戶當前所處的步驟需要不同的值。例如，將slider 1從「1」更改爲「2」將從「0」到「4」取slider 2，但將slider 1從「2」更改爲「3」將從「8」到「16」取slider 2。基本上，不再是一個常數。我只是想知道最好的高層次方法是什麼。

新的值是在slider 1左欄顯示的變化，並且將更新slider 2增量如下：

1 to 2 => 4 
2 to 3 => 8 
3 to 4 => 16 
4 to 5 => 16 
5 to 6 => 24 
6 to 7 => 12

我的新範圍2看起來是這樣的：

<input type='range' min='0' max='80' step='4' id="range-3" />

任何人對我有任何開始的想法？

來源

2016-08-02 JordanBarber

可能有這樣做的許多不同的方式。一種可能性是預先計算兩個範圍之間的對應表。

var slider = [ 
 
     document.getElementById('range-1'), 
 
     document.getElementById('range-2') 
 
    ], 
 
    fromSlider = [ [], [] ]; 
 

 
function initSliderTables(step) { 
 
    var p = 0; 
 

 
    step.concat(0).forEach(function(s, i) { 
 
    for(var j = 0; j <= s; j++) { 
 
     fromSlider[1][p + j] = i + 1; 
 
    } 
 
    fromSlider[0][i + 1] = p; 
 
    p += s; 
 
    }); 
 
} 
 

 
function update(from) { 
 
    slider[from^1].value = fromSlider[from][slider[from].value]; 
 
    
 
    document.getElementById('debug0').innerHTML = slider[0].value; 
 
    document.getElementById('debug1').innerHTML = slider[1].value; 
 
} 
 

 
initSliderTables([ 4, 8, 16, 16, 24, 12 ]); 
 
update(0);

<input id="range-1" type='range' onchange="update(0)" min='1' max='7' step='1' /> 
 
<span id="debug0"></span><br> 
 
<input id="range-2" type='range' onchange="update(1)" min='0' max='80' step='4' /> 
 
<span id="debug1"></span>

我們可以這樣做避免了for循環：

step.concat(1).forEach(function(s, i) { 
    fromSlider[1] = fromSlider[1].concat(Array(s).fill(i + 1)); 
    fromSlider[0][i + 1] = p; 
    p += s; 
});

然而，.fill()尚未被所有的瀏覽器都支持。

來源

2016-08-02 16:30:03 Arnauld

很高興幫助。請注意，我發佈了幾分鐘與IE不兼容的編輯版本。我自回滾並將備用代碼添加爲腳註。確保使用最適合您需求的那種。 – Arnauld

乾淨的方法可能是定義一個增量數組，並用它來定義範圍設置;在這個例子中，我寫了一個簡單的增量，因爲我不明白你確切的需求，但這是想法，那麼你可以簡單地改變'改變'事件的操作。

var increments = [0,4,8,16,16,24,12]; 

$('#range-3').attr('max', increments.reduce((a, b) => a + b, 0)); 
$('#range-3').attr('step', Math.min.apply(null,increments.slice(1,increments.length))); 

$('#range-2').on('change', function() { 
    $('#range-3').val($('#range-2').val() + increments[$(this).val()-1]); 
});

Here a sample jsfiddle

來源

2016-08-02 16:27:33 Luca

座標兩個基於數組的水平範圍輸入

回答

相關問題