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 .click（）関数（またはイベントリスナー）を使用するカント私のプロジェクトでは、divの永久的な部分がないためです。

"alerter"関数がスコープ関数内にない場合はもちろん、グローバル変数を宣言する必要はありません。

ありがとうございました！

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文を使用する特別な理由はありますか？ @daderが指摘しているように、jQueryの.onイベントを使用することを検討してください。例はあること：

$（ "＃最初の"）（ 'クリック'、機能（）{警告（ "第一"）}）上の