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"，以及具有相关输入ID 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");
    });
});

如何有效地重复多个标识符的jquery-ui函数

1 个答案: