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

【问题标题】：Getting the average value of multiple input-type range sliders获取多个输入类型范围滑块的平均值
【发布时间】：2018-08-27 20:51:28
【问题描述】：

我有一个带有 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>

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

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

【问题讨论】：

您是否使用 jquery 或 javascript 编写过代码？如果你这样做了，也把它放在问题中。
不，还没有。
你可以这样做：v = ((v1+v2+v3+v4+v5) / 5 ); index = (ceil(v * 4 / 100) || 1) - 1 - 请参阅下面的答案

标签： javascript jquery html input range

【解决方案1】：

所以您有 5 个滑块，它们的 MAX 值都相同，均为 100。所以最大500
从当前范围值获取元素索引：

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>

【讨论】：

【解决方案2】：

在这里，我放置了一些 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

【讨论】：

这非常非常好用！我一直在修改它，并且一直想知道如何修改它，以简单地将所有滑块的累积值添加到总和中（所以没有平均，而只是 +'ing 所有输入值），然后我可以根据它显示内容？有任何想法吗？我不知道你为什么顺便被否决了。在我看来，这是最好的解决方案。

【解决方案3】：

使用纯 Javascript：如果您使用 [HTMLNode].children，这将为您提供该节点内的元素数组。

因此您可以通过以下方式收集所有输入：

document.getElementById('sliderbox').children

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

【讨论】：