Применение функциональности ползунка диапазона JS к нескольким селекторам ID

Question

ПРОБЛЕМА:

У меня есть четыре ползунка диапазона (от https://rangeslider.js.org) Я хочу активировать в своем HTML-документе, но я бы хотел избежать копирования / вставки одного и того же кода JS четыре раза. Есть ли способ сообщить JS, что я хочу применить эту функциональность для всех ползунков?

ФОН (HTML):

• Каждый слайдер состоит из трех компонентов
• 1) Во-первых, где будет отображаться фактический слайдер ( # judmentslider1 )

<input id="judgementslider1" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider>

• 2) Когда кто-то перемещает ползунок диапазона, появляется целое число ( # output1 )

<output class="my-3" id="output1"></output>

• 3) Наконец, значение ползунка обновляется до скрытого поля ввода ( # j1 )

<input type="hidden" id="j1" name="j1" value="">

ВОПРОС:

Как мне переписать код JS, чтобы учесть все ползунки (# judmentslider1, # judmentslider2, # judmentslider3, # judmentslider4) и одновременно применить эту нумерацию к выходным данным (# output1, # output2, # output3, # output4) и скрытое поле ввода (# j1, # j2, # j3, # j4)?

МИНИМАЛЬНЫЙ РАБОЧИЙ ПРИМЕР (MWE):

https://codepen.io/constituo/pen/qzKOyW

Answer 1

Попробуй вот так.

Я добавил массив идентификаторов, зациклил его и передал функции valueOutput для генерации output и установки значения hidden.

Затем я добавил атрибут ids к этому входу ползунка.

затем во время изменения я получил данные целевых элементов и передал функции valueOutput для генерации значений.

$(function() {
  var $document = $(document);
  var selector = [ 'judgementslider1', 'judgementslider2', 'judgementslider3', 'judgementslider4' ];
  /** * Example functionality to demonstrate a value feedback * and change the output's value. */
  function valueOutput(elem, i) {
    var element = $('#'+elem); 
    var value = element.val();
    var j = +i+1;
    var output = document.getElementById('output'+j);
    var input = document.getElementById('j'+j);
    output.innerHTML = value;
    input.value = value;
    element.rangeslider({
      polyfill: false
    });
  } 
  /** * Initial value output */
  for (var i = selector.length - 1; i >= 0; i--) {
    valueOutput(selector[i], i);
  }; 
  /** * Update value output */
  $document.on('input', selector, function(e) {
    valueOutput(e.target.id,e.target.getAttribute('ids'));
  });
  /** * Initialize the elements */
  
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<script src="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css"/>
<link rel="stylesheet" href="https://rangeslider.js.org/assets/rangeslider.js/dist/rangeslider.css"/>

<form action="study.php" method="post" id="judgementevaluation">
    <ul>
        <h3 class="text-center mb-4"><strong>Morgonens Nyheter</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider1" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="0"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output1"></output>
        <input type="hidden" id="j1" name="j1" value="">

        <h3 class="text-center mb-4"><strong>Andreas Berglund</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider2" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="1"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output2"></output>
        <input type="hidden" id="j2" name="j2" value="">

        <h3 class="text-center mb-4"><strong>Sweden Television (SWET)</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider3" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="2"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output3"></output>
        <input type="hidden" id="j3" name="j3" value="">

        <h3 class="text-center mb-4"><strong>Ewa Dubszanska</strong></h3>
        <div class="row d-flex justify-content-center text-center">
            <div class="rangerleft col-md-3 col-xs-12 font-weight-bold">
                Very trustworthy
            </div>
            <div class="rangercenter col-md-6 col-xs-12">
                <input id="judgementslider4" type="range" min="1" max="100" step="1" value="50" labels="1, 100" data-rangeslider ids="3"><!-- added a extra arrribute ids here -->
            </div>
            <div class="rangerright col-md-3 col-xs-12 font-weight-bold">
                Not trustworthy
            </div>
        </div>
        <output class="my-3" id="output4"></output>
        <input type="hidden" id="j4" name="j4" value="">
    </ul>
    <button type="submit" name="evaluate" class="btn btn-primary mt-3">Submit</button>
</form>