Question

我有一个对象，它定义了要在页面元素的click事件中调用的函数的名称和参数。

object_array = [
    {
       id: "id1",
       onclick: "load_file(filename.php);",
    },

    {
       id: "id2",
       onclick: "open_url('http://url.com');",
    }
];

必须动态检索该信息。我想在click事件中调用数组中给定对象的onclick函数。

$('element').click(function() {
      // call object.onclick
});

似乎eval（）不是一个好选择。是否有不同的方式来调用该函数？

Answer 1

这是一个有效的jsfiddle： http://jsfiddle.net/Zh6Fv/1/

像这样：

 object_array = [
        {
           id: "id1",
           // Encapsulate in an anonymous function
           onclick: function(){ load_file('filename.php'); },
        },
        {
           id: "id2",
           // Encapsulate in an anonymous function
           onclick: function(){ open_url('http://url.com'); },
        }
    ];

然后实际绑定它像这样::

$('element').click(obj.onclick);

据推测，你会像这样使用它::

object_array.forEach(function(obj){
     // Note there is no need to wrap the obj.onclick
     // into another anonymous function anymore!
     $("#" + obj.id).click(obj.onclick);
});

这是一个有效的jsfiddle： http://jsfiddle.net/Zh6Fv/1/

Answer 2

您应该将object_array重构为：

[{
    id: "id1",
    action: "load_file",
    url: "filename.php"
}, {
   id: "id2",
   action: "open_url",
   url: 'http://url.com'
}];

然后你可以用：

来调用它

var actions = {
    load_file: function(url) {
        ...
    },
    open_url: function(url) {
        ...
    },
    ...
};
object_array.forEach(function(ob) {
    $("#"+ob.id).click(function() {
        actions[ob.action](ob.url);
    });
});

如果你有更复杂的参数，你也可以提供一个参数数组而不是url并在函数上使用apply()。

或者，如果您只想要一个函数查找表，请使用：

var object = {
    "id1": function() {
        load_file('filename.php');
    },
    "id2": function() {
        open_url('http://url.com');
    }
};
$('element').click(function() {
    object[this.id]();
});

Answer 3

您可以声明类似

的功能

onclick : function()
{
   action(arguments);
}

调用对象中定义的函数

3 个答案: