如何通過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指出。一個例子是：

$（ 「＃第一個」​​）在（ '點擊'，函數（）{警報（ 「第一」）}）