Jquery动态更改函数名称

Jquery dynamically change function name

本文关键字：函数 动态 Jquery      更新时间：2023-09-26

我们用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种方法

你可以简单地使用window，它会工作得很好

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>

代替

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

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

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

在我看来，处理这个问题的方法是错误的。

如果在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>

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

window[fun].call();

所以在你的情况下

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

嗯…您可以为所有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>
相关文章：