Question

我有一个div，其中包含5个输入类型的范围填充器和一个提交按钮。

double

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

1.79E308

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

例如，如果提交时这些滑块的累计平均值在0到25之间，我是否可以显示“ hidden1”？或者，如果该值在25到50之间，则为“ hidden2”，依此类推？

Answer 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>

Answer 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

Answer 3

使用纯Javascript：如果您使用[HTMLNode] .children，则会在该节点内为您提供一系列元素。

因此，您可以使用以下命令收集所有输入：

document.getElementById('sliderbox').children

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

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

3 个答案: