Javascript 以编程方式初始化多个jQuery滑块，每个滑块使用不同的onChange函数

我会尽量直截了当的。我正在使用jQuery滑块，并尝试使用数组一次性初始化它们：

sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange()));

function slider (context, id, min, max, defaultvalue, changeFunc) {
    this.context = context;
    this.id = id;
    this.min = min;
    this.max = max;
    this.defaultvalue = defaultvalue;
    this.changeFunc = changeFunc;

}

其中context是其预期父div的ID，changeFunc是我希望它在更改时调用的函数

我的Init函数循环遍历该数组，并根据上下文追加标记，然后尝试初始化每个jquery滑块，如下所示：

$(id).slider({
      range: "min",     
      min: sliders[i].min,   
      max: sliders[i].max,
      value: sliders[i].defaultvalue,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      },
      change: function() {
          sliders[i].changeFunc();
      }
 });

min、max和value初始化工作正常，可能是因为它们在初始化期间只发生一次，但change函数失败得很惨，再次可能是因为它只是试图查找每个更改上的滑块[i]（到那时为止，我是一个死了很久的迭代器）

我的问题是——如何通过编程初始化一组jquery滑块，每个滑块都有不同的onChange函数？也就是说，不需要手动操作

编辑：从下面的Ramon de Paula Marques那里得到了一些很大的帮助，不过最后我不得不用一种完全不同的方法来完成，因为我无法将值传递给函数。不管是好是坏，我最终做的是创建一个包装器函数，它只需根据调用它的滑块的id查找一次正确的更改函数

function parcelSliderFunction(caller, value)
{
   for (var x = 0; x < sliders.length; x++)
    {
        if(sliders[x].id == caller) {
            sliders[x].callback(value);
            return;
        }
    }

    console.log("id " + caller + " not found, you done screwed up.");
    return;

}

函数parcelSliderFunction（调用者，值）
{
对于（变量x=0；x

---

我可能应该用字典来解释这件事

首先，您必须删除此行中函数作为参数的括号

sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange()));

它变成

sliders.push(new slider('paletteControl','pSlider',0,255,100,sliderChange));

然后得到如下的change函数（不带括号）

或

---

您可以使用窗口[value.changeFunc]调用changeFunc，如下所示

function newSlider(context, id, min, max, defaultvalue, changeFunc) {
    this.context = context;
    this.id = id;
    this.min = min;
    this.max = max;
    this.defaultvalue = defaultvalue;
    this.changeFunc = changeFunc;
}

function func1() {
    $('#output').append("func1<br>");
}

function func2() {
    $('#output').append("func2<br>");
}

function func3() {
    $('#output').append("func3<br>");
}

var sliders = [];
sliders.push(new newSlider('paletteControl', 'pSlider1', 0, 255, 100, "func1"));
sliders.push(new newSlider('paletteControl', 'pSlider2', 0, 255, 200, "func2"));
sliders.push(new newSlider('paletteControl', 'pSlider3', 0, 255, 70, "func3"));

$.each(sliders, function(index, value) {
    $("#" + value.id).slider({
        range: "min",
        min: value.min,
        max: value.max,
        value: value.defaultvalue,
        change: window[value.changeFunc]
    });
});

函数newSlider（上下文、id、最小值、最大值、默认值、changeFunc）{
this.context=上下文；
this.id=id；
this.min=min；
this.max=max；
this.defaultvalue=defaultvalue；
this.changeFunc=changeFunc；
}
函数func1（）{
$（'#output'）。追加（“func1
”）；
}
函数func2（）{
$（'#output'）。追加（“func2
”）；
}
函数func3（）{
$（'#output'）。追加（“func3
”）；
}
var滑块=[]；
滑块。推（新的新闻滑块（'paletteControl'，'pSlider1'，0，255，100，“func1”）；
滑块。推（新的新闻滑块（'paletteControl'，'pSlider2'，0，255，200，“func2”）；
滑块。推（新的新闻滑块（'paletteControl'，'pSlider3'，0，255，70，“func3”）；
$。每个（滑块、函数（索引、值）{
$（“#”+value.id）.滑块({
射程：“分钟”，
min:value.min，
max:value.max，
value:value.defaultvalue，
更改：窗口[value.changeFunc]
});
});

---

工作代码：

这非常有效，但我无法传递滑块的当前值，原因有两个：#1：尝试传递任何值都会破坏这一点，这很有意义。每个滑块的更改功能在加载时立即启动，然后不再启动#2.即使没有发生#1，尝试传递当前滑块值也会在滑块上出现“you used a method before init”错误。您可以在sliderChange函数中使用jquery获取当前值，无需将其作为参数传递。试试这个：var selection=$（“.selector”）.slider（“value”）；理解-但是函数不一定知道哪个滑块调用它。这是一种痛苦，也许我只是设计错了。应该，在我看来，你的设计是slider1有sliderChange1功能，slider2有sliderChange2功能…是的，我应该更清楚这一点-这个应用程序将有几十个滑块，目标可能是10个功能，所以多个滑块将使用相同的功能。

$(id).slider({
      range: "min",     
      min: sliders[i].min,   
      max: sliders[i].max,
      value: sliders[i].defaultvalue,
      create: function() {
        handle.text( $( this ).slider( "value" ) );
      }
 });

$( id ).on( "slidechange", function( event, ui ) {} );

function newSlider(context, id, min, max, defaultvalue, changeFunc) {
    this.context = context;
    this.id = id;
    this.min = min;
    this.max = max;
    this.defaultvalue = defaultvalue;
    this.changeFunc = changeFunc;
}

function func1() {
    $('#output').append("func1<br>");
}

function func2() {
    $('#output').append("func2<br>");
}

function func3() {
    $('#output').append("func3<br>");
}

var sliders = [];
sliders.push(new newSlider('paletteControl', 'pSlider1', 0, 255, 100, "func1"));
sliders.push(new newSlider('paletteControl', 'pSlider2', 0, 255, 200, "func2"));
sliders.push(new newSlider('paletteControl', 'pSlider3', 0, 255, 70, "func3"));

$.each(sliders, function(index, value) {
    $("#" + value.id).slider({
        range: "min",
        min: value.min,
        max: value.max,
        value: value.defaultvalue,
        change: window[value.changeFunc]
    });
});