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

balp4ylt 于 2022-12-28 发布在 Java

关注(0)|答案(3)|浏览(139)

我一直在尝试创建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/，如果你拖动范围太快，或者点击范围的线条，它就不起作用了。

JavaScript

来源：https://stackoverflow.com/questions/51025168/how-to-group-input-type-range-and-keep-100-the-max-value-of-all-ranges-combined

3条答案

按热度按时间

hc8w905p1#

我认为计算当前滑块上的差值，然后将该差值应用到前一个滑块上会更容易。

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/
我恐怕这不是最干净的失败到下一个滑块的解决方案，它应该是一个循环遍历数组直到返回应该更新的滑块的方法，但是jsfidle应该足够让你走上这条路。
就我个人而言，我建议所有其他滑块调整时，拖动一个，你所描述的方式将使它很难设置他们都为25%，例如.我很感激这不是你的问题，但我想我会提到它.

赞(0）回复(0）举报 2022-12-28

u59ebvdq2#

我没有测试过这段代码，但是你可以有解决你的问题的基本思路。此外，你只需要记住以前移动的滑块，你必须记住所有的滑块在以前移动的顺序。

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

这是小提琴。

赞(0）回复(0）举报 2022-12-28

92dk7w1h3#

此代码创建两个表，每个表中有两个范围输入和两个数字输入。范围输入和数字输入是链接的，这意味着更改其中一个的值将更新另一个的值。此代码还显示每个表中范围输入值的合计。
要创建范围输入和数字输入，代码使用HTML“input”元素，并将“type”属性设置为“range”或“number”。还为每个input元素设置了“value”、“min”和“max”属性。
当范围输入的值更改时，使用“oninput”事件调用JavaScript函数“updateTotalTable1”和“updateTotalTable2”。这些函数通过循环范围输入并将其值相加来计算每个表中范围输入值的总和。然后，总和显示在具有相应“id”的“span”元素中。
“updateInputNumber”和“updateRangeInput”函数在数字输入的值更改时调用，也使用“oninput”事件。这些函数分别更新相应的范围输入或数字输入的值。
代码中的CSS将表格和输入设置为占页面宽度的50%并居中，范围输入的宽度为100%。
最后，代码调用“updateTotalTable1”和“updateTotalTable2”函数以在页面加载时初始化总计显示。
超文本：

<table id="table1">
  <tr>
    <td>
      <input type="range" id="range1" value="50" min="0" max="100" oninput="updateTotalTable1(this); updateInputNumber(this)">
      <input type="number" id="number1" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
    <td>
      <input type="range" id="range2" value="50" min="0" max="100" oninput="updateTotalTable1(this); updateInputNumber(this)">
      <input type="number" id="number2" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
  </tr>
</table>
<p>Total for Table 1: <span id="total1"></span></p>
<table id="table2">
  <tr>
    <td>
      <input type="range" id="range3" value="50" min="0" max="100" oninput="updateTotalTable2(this); updateInputNumber(this)">
      <input type="number" id="number3" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
    <td>
      <input type="range" id="range4" value="50" min="0" max="100" oninput="updateTotalTable2(this); updateInputNumber(this)">
      <input type="number" id="number4" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
  </tr>
</table>
<p>Total for Table 2: <span id="total2"></span></p>

    enter code here<table id="table1">
  <tr>
    <td>
      <input type="range" id="range1" value="50" min="0" max="100" oninput="updateTotalTable1(this); updateInputNumber(this)">
      <input type="number" id="number1" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
    <td>
      <input type="range" id="range2" value="50" min="0" max="100" oninput="updateTotalTable1(this); updateInputNumber(this)">
      <input type="number" id="number2" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
  </tr>
</table>
<p>Total for Table 1: <span id="total1"></span></p>
<table id="table2">
  <tr>
    <td>
      <input type="range" id="range3" value="50" min="0" max="100" oninput="updateTotalTable2(this); updateInputNumber(this)">
      <input type="number" id="number3" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
    <td>
      <input type="range" id="range4" value="50" min="0" max="100" oninput="updateTotalTable2(this); updateInputNumber(this)">
      <input type="number" id="number4" value="50" min="0" max="100" oninput="updateRangeInput(this)">
    </td>
  </tr>
</table>
<p>Total for Table 2: <span id="total2"></span></p>

CSS：

table {
  width: 50%;
  margin: 0 auto;
}

td {
  width: 50%;
}

input[type="range"] {
  width: 100%;
}

联森：

function updateTotalTable1(rangeInput) {
    let total = 0;
    let ranges = document.querySelectorAll("#table1 input[type='range']");
    ranges.forEach(function(range) {
      total += parseInt(range.value);
    });
  
    // Update the total display
    document.getElementById("total1").innerHTML = total;
  
    // Check if the total is at the maximum value and prevent the user from increasing the value of the range input if it is
    if (total >= 100) {
      rangeInput.value = Math.min(rangeInput.value, 100 - (total - rangeInput.value));
    }
  }
  
  function updateTotalTable2(rangeInput) {
    let total = 0;
    let ranges = document.querySelectorAll("#table2 input[type='range']");
    ranges.forEach(function(range) {
      total += parseInt(range.value);
    });
  
    // Update the total display
    document.getElementById("total2").innerHTML = total;
  
    // Check if the total is at the maximum value and prevent the user from increasing the value of the range input if it is
    if (total >= 100) {
      rangeInput.value = Math.min(rangeInput.value, 100 - (total - rangeInput.value));
    }
  }
function updateInputNumber(rangeInput) {
  let inputNumber = document.getElementById(rangeInput.id.replace("range", "number"));
  inputNumber.value = rangeInput.value;
}
function updateRangeInput(inputNumber) {
  let rangeInput = document.getElementById(inputNumber.id.replace("number", "range"));
  rangeInput.value = inputNumber.value;
   // Update the total value for the corresponding table
  if (inputNumber.id.startsWith("number")) {
    updateTotalTable1(rangeInput);
  } else {
    updateTotalTable2(rangeInput);
  }
}

 // Initialize the total display
  document.addEventListener("DOMContentLoaded", function() {
    updateTotalTable1();
    updateTotalTable2();
   
  });

赞(0）回复(0）举报 2022-12-28

我来回答

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

3条答案

相关问题

热门标签

最新问答