如何通过onclick事件访问作用域中的函数？

Question

这里一个简单的例子：

$(function(){ ///scope 
 
      function alerter(number){ 
 
       switch(number){ 
 
        case 1: 
 
         alert("first"); 
 
        break; 
 
        
 
        case 2: 
 
         alert("second"); 
 
        break; 
 
       } 
 
      } 
 
     });

#first{ 
 
      width: 300px; 
 
      height: 300px; 
 
      background: red; 
 
     } 
 
     
 
     #second{ 
 
      width: 300px; 
 
      height: 300px; 
 
      background: blue; 
 
     }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script> 
 
<div id="first" onclick="alerter(1)"> 
 
    </div> 
 
    <div id="second" onclick="alerter(2)"> 
 
    </div>

该错误消息表示： “警报器没有定义”

我不能使用JS。点击（）函数（或事件侦听）在我的项目中，因为没有永久的div。

当然，如果“警报器”函数不在范围函数内，但是我不想声明全局变量，它会起作用。

感谢您的帮助！

Answer 1

这里的问题是“警报器”被定义为通过对匿名函数的调用而创建的临时范围。

如果你想它的范围之外，你需要做的像

window.alerter = function alerter... 

[编辑]

东西既然你不想申报了“全局”变量，你需要使用js来坚持事件，cf评论。

而且你可以使用委托事件又名jQuery的“on”方法来做到这一点。它不需要永久的div来运作。

Answer 2

如果您不会将其声明为全局函数，则html将无法调用它。如果你不能扭转你的逻辑，并做下面的事情。

$(function() { ///scope 
 
    $("#first").on("click", function() { 
 
    alerter(1); 
 
    }); 
 

 
    $("#second").on("click", function() { 
 
    alerter(2); 
 
    }); 
 

 
    function alerter(number) { 
 
    switch (number) { 
 
     case 1: 
 
     alert("first"); 
 
     break; 
 

 
     case 2: 
 
     alert("second"); 
 
     break; 
 
    } 
 
    } 
 
});

#first { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: red; 
 
} 
 

 
#second { 
 
    width: 300px; 
 
    height: 300px; 
 
    background: blue; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<div id="first"> 
 
</div> 
 
<div id="second"> 
 
</div>

这种方式可以让您的全球范围内的清洁，但你有相同的功能。

Answer 3

如果你用这段代码解释你想要达到的目的，这可能会有所帮助。是否有使用switch语句的特定原因？你可能想要考虑使用jQuery .on事件作为@dader指出。一个例子是：

$（ “＃第一个”​​）在（ '点击'，函数（）{警报（ “第一”）}）