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

Question

我会尽量保持简单。 我正在使用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();
      }
 });

最小值，最大值和值的初始化工作正常，大概是因为它们在初始化过程中恰好发生了一次，但是change函数的失败却很惨，同样是因为它只是试图在每次更改时查找Slider [i]（我是一个到此为止的长死亡迭代器）。

我的问题是-如何以编程方式初始化一堆jquery滑块，每个滑块都具有不同的onChange函数？ 无需手动执行操作即可。

编辑：从下面的拉蒙·德·保拉·马克斯那里得到了很大的帮助，尽管最后我不得不以一种完全不同的方式来做，因为我无法将值传递给该函数。 最终，无论好坏，我要做的就是创建一个包装函数，该函数只是根据调用它的滑块的ID查找曾经调用过的正确的change函数。

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;

}

我可能应该为此使用字典。

Answer 1

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

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

它成为了

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

然后，您将获得如下所示的change函数（不带括号）

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

要么

$(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 ) {} );

Answer 2

您可以使用window [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]
    });
});

工作代码： https : //plnkr.co/edit/nwjOrnwoI7NU3MY8jXYl?p=preview