Как эффективно повторить JQuery-UI функции для нескольких идентификаторов

Question

У меня есть функция следующего JavaScript (JQuery-UI библиотеки):

$(function() { 
    $("#mixerSlider0").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: function(event, ui) { 
      $("#mixerInp0").val(ui.value); 
     } 
    }); 
    $("#amount0").val($("#mixerInp0").slider("value")); 
}); 

Эта функция работает идеально, и теперь я хочу, чтобы применить ту же функцию для 64 больше элементов «mixerSliderX», «mixerInpX» и «amountX», где X = 0..63.

Теперь я мог бы просто скопировать эту функцию 63 раза и настроить эти идентификаторы, однако я уверен, что есть более логичный способ сделать это и избежать такого ужасного количества дублирования кода. Однако я не уверен, как это сделать, надеюсь, что кто-то может помочь.

Answer 1

Дайте им все классы, например. class="mixerSlider" и атрибут данных с соответствующим идентификатором ввода, data-input="mixerSlider0".

Также укажите поля #amountX класса .amount, чтобы вы могли работать с ними как с группой.

$(function() { 
    $(".mixerSlider").slider({ 
     orientation: "vertical", 
     range: "min", 
     min: 0, 
     max: 100, 
     value: 60, 
     slide: function(event, ui) { 
      $('#' + $(this).data("input")).val(ui.value); 
     } 
    }); 
    $(".amount").val(function(i) { 
     return $("#mixerInp" + i).slider("value"); 
    }); 
});