Получение среднего значения нескольких ползунков диапазона ввода

Question

У меня есть div с 5 входными диапазонами и кнопкой отправки.

<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, могу ли я отобразить «скрытый1»? Или если значение от 25 до 50, «hidden2» и т. Д.

Answer 1

Использование простого Javascript: если вы используете [HTMLNode] .children, это даст вам массив элементов в этом узле.

Таким образом, вы можете собрать все свои данные с помощью:

document.getElementById('sliderbox').children

Это даст вам HTMLCollection , которую вы можете затем выполнить с помощью цикла for, чтобы получить значение каждого элемента и вычислить среднее значение из этого.

Answer 2

Итак, у вас есть 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 3

Здесь я поставил на место некоторый 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