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

min，max和value inits运行正常，大概是因为它们在init期间恰好发生了一次，但是更改函数非常失败，这可能是因为它只是试图在每次更改时查找滑块[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;

}

我应该为此使用字典。

Answer 1

首先，你必须删除函数的括号作为参数，在这一行

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

变成

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

然后你得到这样的改变函数（没有括号）

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

OR

$(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

您可以使用窗口[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

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

2 个答案: