2

我正在创建一个网页，其中有 3 个元素，每个元素都有其 ID，在脚本部分我有 3 个与 html ID 具有相同名称的函数。我想在单击元素时执行相应的函数。以下是我的代码：（小提琴）

HTML：

<div id="one" class="btn">
  Click here for 1
</div>
<div id="two" class="btn">
  Click Here for 2
</div>
<div id="three" class="btn">
  Click Here for 3
</div>

JQ:

$('.btn').on('click',function(){
  $(this).attr('id')()  //here I want to run function
});
function one(){alert("one clicked")}
function two(){alert("two clicked")}
function three(){alert("three clicked")}

请帮助..我不想使用 if 语句...我正在尝试以最优化的方式执行此操作.. :) 这是小提琴的链接

4

5 回答 5

10

将函数定义为如下对象，

var myFunc = {
  one: function (){alert("one clicked")},
  two: function (){alert("two clicked")},
  three: function (){alert("three clicked")}
};

现在在处理程序内部调用，

myFunc[this.id](); //Note: this.id is good and better than $(this).attr('id')
于 2013-06-27T16:30:17.993 回答
3

使用窗口全局对象的另一种方式：

演示

$('.btn').on('click',function(){
      window[this.id]();  //here I want to run function            
});
one = function(){alert("one clicked")}
two = function(){alert("two clicked")}
three = function(){alert("three clicked")}
于 2013-06-27T16:34:46.580 回答
1

好的，试试这个：

var theFunctions = {
      one: function () { alert("one clicked"); },
      two: function () { alert("two clicked"); },
      three: function () { alert("three clicked"); },
};

$('.btn').on('click',function(){
   theFunctions[$(this).attr('id')](); //here I want to run function
});

你可以看看：http: //jsfiddle.net/RFANE/

于 2013-06-27T16:34:35.673 回答
0

您可以使用eval：

eval($(this).attr('id'));

注意：在使用此方法之前，您需要阅读有关eval的信息。

于 2013-06-27T16:30:32.200 回答
0 
$('.btn').on('click',function(){
    eval($(this).attr('id'))();
});
于 2013-06-27T16:32:38.710 回答