Jquery动态更改函数名称

Question

我们在jquery中编写了一些函数。当用户点击每个div时，我们需要动态调用每个函数。

   <div class="test" id="test1"></div>
   <div class="test" id="test2"></div>


function test1(){
   alert('test1');
   }

   function test2(){
   alert('test2');
   }


   $(".test").on("click",function(){

   var function_name=$(this).attr("id");
    window[function_name]();

   });

但是这段代码不能正常运行，错误是窗口[function_name]不是函数。 怎么解决这个问题

还请建议另外2,3种方法

Answer 1

你可以简单地使用窗口，它会工作正常

 function test1(){ alert('You clicked on Test1'); } function test2(){ alert('You clicked on Test2'); } $(".test").on("click",function(){ var function_name=$(this).attr("id"); var call_myFun = window[function_name]; call_myFun() }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test" id="test1">Test 1</div> <div class="test" id="test2">Test 2</div> 

你也可以这样做..

 $(".test").on("click",function(){ var function_name=$(this).attr("id"); eval(function_name + "()"); }); function test1(){ alert('clicked on test1'); } function test2(){ alert('clicked on test2'); } 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test" id="test1">test1</div> <div class="test" id="test2">test2</div> 

Answer 2

嗯..你可以为你的所有div创建汇总功能：

JQuery的：

function xDiv(e){
    var i = $(e).attr("id");
    switch (i){
        case "test1":
             //Call matching function
            break; 
        case "test2":
            //Call matching function
            break; 
        case "test3":
            break;
        /*...*/
        default:
            break;
    }
     alert("This call from: " + i );
}

** HTML：**

<div id="test1" onclick="xDiv(this);">test1</div>
<div id="test2" onclick="xDiv(this);">test2</div>
<div id="test3" onclick="xDiv(this);">test3</div>
<div id="test4" onclick="xDiv(this);">test4</div>

Answer 3

代替

var function_name=$(this).attr("id");
function_name();

使用

var function_name=$(this).attr("id");
eval(function_name+"()");

参见示例https://jsfiddle.net/f6z04dfq/

Answer 4

在我看来，解决问题的方法是错误的。

如果你的div上有id ，你可以将正确的函数绑定到你想要的事件上。

这是解决您问题的简单而有效的方法。

可读性和可维护性的优势是巨大的。

例如：如果将来某个人以某种方式更改某个功能上的名称，而该ID不再匹配，该怎么办？

找到动态调用函数的代码段并不容易。

所以这是我的建议：

 function test1() { console.log("Click on DIV 1"); } function test2() { console.log("Click on DIV 2"); } $(function(){ $('#test1').click(test1); $('#test2').click(test2); }); 

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <div class="test" id="test1">Test 1</div> <div class="test" id="test2">Test 2</div> 

Answer 5

你可以使用call方法调用动态函数。

window[fun].call();

所以在你的情况下

$(".test").on("click",function(){
   var function_name=$(this).attr("id");
   window[function_name].call();
});