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