javascript - 如何对输入类型范围进行分组并保持所有范围组合在一起的最大值为 100%

Question

我一直在尝试创建 4 个输入类型范围，所有这些 (4) 的总和为 100。例如:

Range 1 : 20%
Range 2 : 20%
Range 3 : 20%
Range 4 : 40%

如果我将范围 4 的值拖动到 50%，我预计会出现以下结果:

Range 1 : 20%
Range 2 : 20%
Range 3 : 10% (last/previous range that was dragged)
Range 4 : 50%

总体概念:

我有一个数组，其中包含所有类型范围的 id。该数组是在页面加载时创建的 - 因此，当页面加载时，该数组如下所示:

["fitness-range","social-range","gourmet-range","street-range"]

代码:

var current_total_percentage = 0; // To have the total percentage
var slider_indexes = []; // The array which holds the id's of type ranges

// Loop each type range and add it's value to the total percentage
jQuery('input[type=range]').each(function (index, value) {
    current_total_percentage += parseInt(jQuery(this).val());
    slider_indexes.push(jQuery(this).attr("id")); // Add the id to the array

});

每次拖动输入范围时，我都会将其 ID 移动到该数组的第一个位置，以了解最后拖动的范围 => 这意味着如果增加或减少另一个范围，则最后一个范围应该更改值。

移动功能:

arraymove(slider_indexes, slider_indexes.indexOf(jQuery(this).attr("id")), 0);

function arraymove(arr, fromIndex, toIndex) {
    var element = arr[fromIndex];
    arr.splice(fromIndex, 1);
    arr.splice(toIndex, 0, element);
}

我已经尝试了很多东西，但要使其发挥作用非常具有挑战性，因此任何提示将不胜感激。

注释:

1) 范围值更改的步长为 10。这意味着每次更改范围值时，它都会变为 +10 或 -10。

2)当减小范围时，我想将最后拖动的范围减小/增大 10，以便始终保持 100%。

3) 如果一个范围被拖动到 100%，所有其他范围必须变为 0%，与数组中该时刻出现的同一行。

编辑1:到目前为止我的解决方案-> https://jsfiddle.net/7q569ugo/10/ ，如果您拖动范围太快，或者单击范围的线条，则该功能不起作用。

Answer 1

我认为计算当前 slider 上的差异，然后将该差异应用于前一个 slider 会更容易。

var current_value = parseInt($(this).val());
var previous_value = parseInt($(this).data('previous-value'));
var difference = current_value - previous_value;

然后您必须处理前一个 slider 是否超出范围(低于 0 或超过 100)。

https://jsfiddle.net/htd8x2jz/1/

恐怕这不是最干净的下一个 slider 失败解决方案，它实际上应该是一种循环遍历数组直到返回应该更新的 slider 的方法。但 jsfiddle 应该足以让你上路。

就我个人而言，我建议在拖动 slider 时调整所有其他 slider ，例如，您所描述的方式会使将它们全部设置为 25% 变得非常困难。我很高兴这不是你的问题，但我想我应该提到它。