javascript - 获取多个输入类型范围滑块的平均值

Question

我有一个带有 5 个输入类型范围 silders 和一个提交按钮的 div。

<div class="sliders" id="sliderbox">
<input type="range" name="points" min="0" max="100">
<input type="range" name="points1" min="0" max="100">
<input type="range" name="points2" min="0" max="100">
<input type="range" name="points3" min="0" max="100">
<input type="range" name="points4" min="0" max="100">
<input type="submit">
</div>

在这个 div 下，我还有其他四个包含内容的隐藏 div。

<div id="hidden1">Content</div>
<div id="hidden2">Content</div>
<div id="hidden3">Content</div>
<div id="hidden4">Content</div>

如何获得所有范围滑块的平均组合值（0 到 100 之间的数字），然后在提交时滑动切换这些隐藏的 div 之一？

例如，如果这些滑块的累积平均值在提交时在 0 到 25 之间，我是否可以显示“hidden1”？或者如果值在 25 到 50 之间，“hidden2”等等？

标签： javascriptjqueryhtmlinputrange

Answer 1

所以你有 5 个滑块都具有相同的 MAX 值100。所以 max500
要从当前范围值中获取元素索引：

Floor(current * endMax / (startMax + 1))

例子

const $sliders = $("#sliderbox").find("input[type='range']");
const $cont = $(".cont");
const totSliders = $sliders.length; // 5
const startMax = totSliders * parseInt($sliders.prop("max"), 10); // 500
const endMax = $cont.length; // 4

$sliders.on("input", function() {

  // Get accumulated value of 5 sliders: 0...500
  const current = $sliders.get().reduce((ac, el) => ac + parseInt(el.value, 10), 0);
  // Get index 0...3
  const index = Math.floor(current * endMax / (startMax + 1));
  $cont.addClass("hide").eq( index ).removeClass("hide");
  console.clear(); console.log('Current:' + current + ' Index:'+ index);

}).trigger("input"); // To make immediate effect

.hide {
  display: none;
}

<div class="sliders" id="sliderbox">
  <input type="range" name="points" min="0" max="100" value="0">
  <input type="range" name="points1" min="0" max="100" value="0">
  <input type="range" name="points2" min="0" max="100" value="0">
  <input type="range" name="points3" min="0" max="100" value="0">
  <input type="range" name="points4" min="0" max="100" value="0">
</div>

<div class="cont hide" id="hidden1">1 Content</div>
<div class="cont hide" id="hidden2">2 Content!!!</div>
<div class="cont hide" id="hidden3">3 Content</div>
<div class="cont hide" id="hidden4">4 Content!!!</div>


<script src="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>