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 ，你可以将正确的功能绑定到你想要的事件上。

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

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

例如：如果将来有人会以不再匹配的方式更改函数名称会怎么样？

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

所以这是我的建议：

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

Jquery动态更改函数名称

5 个答案: