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

Question

我有一个带有5个输入类型范围的silder和一个提交按钮的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>

如何获得所有rangeliders的平均组合值（0到100之间的数字），然后在提交时滑动其中一个隐藏的div？

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

Answer 1

在这里我放置了一些javascript。可能这是你想要的东西。

  let avg = 0;

  document.querySelector('.submit').addEventListener('click', event => {

    document.querySelectorAll('.range').forEach(item => {
      avg = Number(item.value) + avg;
    });

    avg = avg / 5;

    if (avg >= 0 && avg <= 25) {
      avg = 0;  

      document.querySelector('#hidden1').classList.add('show');
      document.querySelector('#hidden1').classList.remove('hide');
    }

  });

JSFiddle

Answer 2

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

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>

Answer 3

使用普通的Javascript：如果你使用[HTMLNode] .children，这将为你提供该节点内的一系列元素。

因此，您可以收集所有输入：

document.getElementById('sliderbox').children

这将为您提供HTMLCollection，然后您可以使用for循环迭代以检索每个项目的值，并从中计算平均值。