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

Posted 2023-05-08

【中文标题】如何对输入类型范围进行分组并保持 100% 组合在一起的所有范围的最大值

【英文标题】：How to group input type range and keep 100% the max value of all ranges combined together

【发布时间】：2018-12-04 03:06:05

【问题描述】：

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

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

如果我将 Range 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/ ，如果您将范围拖动得太快，或者单击范围的行，它将不起作用。

【问题讨论】：

请提供您的 Range Change 事件代码

@umer 添加了我的代码的 jsfiddle 版本，该版本可以工作但仍需要 mods

【参考方案1】：

我认为您可以更轻松地计算当前滑块上的差异，然后将该差异应用于前一个滑块。

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

那么你必须处理上一个滑块是否超出范围（低于 0 或超过 100）。

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

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

我个人建议在拖动时调整所有其他滑块，例如，您描述的方式会使将它们全部设置为 25% 非常困难。我很感激这不是你的问题，但我想我会提到它。

【讨论】：

有些事情正在发生，但它仍然需要一些修改......所以我检查了它们

【参考方案2】：

我没有测试过这段代码，但是你可以对你的问题的解决方案有一个基本的想法。此外，您只需记住之前移动的滑块，您必须记住之前移动顺序中的所有滑块。

$(document).ready(function()

var slider_indexes = [];
var i=1;
jQuery('input[type=range]').each(function (index, value) 

var RangeId=jQuery(this).attr("id");
var RangeVal=jQuery(this).val();
var RangeInfoObject= 
"RangeId":""+RangeId+"","RangeVal":""+RangeVal+"","DragOrder":""+i+""
slider_indexes.push(RangeInfoObject); // Add the object to the array
i++;
);

$("[type=range]").change(function()
var DarggedId=$(this).attr("id");
var newval=$(this).val();
var RangeInfoObject=slider_indexes.find(x => x.RangeId==DarggedId);

var PreviousVal=parseInt(RangeInfoObject.RangeVal);
var PreviousDragOrder=parseInt(RangeInfoObject.DragOrder);
var flag=0;
    $.each(slider_indexes, function(i, item) 
       if(item.RangeId==DarggedId)
       
          item.DragOrder=1;
          item.RangeVal=newval;
       
       else
       
           if(parseInt(item.DragOrder)<PreviousDragOrder)
           
              item.DragOrder=parseInt(item.DragOrder)+1;
           
           if(newval<PreviousVal && flag==0)
             
              if(item.RangeVal<100)
              
                  item.RangeVal=parseInt(item.RangeVal)+10;
                                  $("#"+item.RangeId).val(parseInt(item.RangeVal));
                  flag=1;
              
           
           else if(newval>PreviousVal && flag==0)
            
              if(item.RangeVal>9)
              
                  item.RangeVal=parseInt(item.RangeVal)-10;
                  $("#"+item.RangeId).val(parseInt(item.RangeVal));
                  flag=1;
              

           
       
    );
    //Here you need to sort slider_indexes e.g Order by DragOrder
    slider_indexes.sort(function(obj1, obj2) 

        return parseInt(obj1.DragOrder)- parseInt(obj2.DragOrder);
    );
  );
);

这是小提琴。 https://jsfiddle.net/mian_umer/m15g9nky/

【讨论】：

不是我所需要的，因为它不会将所有输入类型组限制为最大 100%

为什么不呢？我假设在初始化时，您将所有四个范围值的总和设置为 100% ，并且有一个 +10 或 -10 的步长，如果是这种情况，我给定的代码将起作用。

例如，如果您将第一个范围拖动到 100%，则所有其他范围都应为 0%

我明白了，我的代码仅在单步仅为 +10 或 -10 时才有效。如果它的 +20 或更多它不起作用。需要弄清楚如何解决它。并且还会有其他问题，例如如果您拖动一个带有 +50 的 Range 并且您之前拖动的 Range 的值为 30 ，那么您需要从之前拖动的 Range 中减去 30，从另一个 Range 中再减去 20。这有点棘手。我看看能不能解决