javascript - jQuery の 2 つのボタンの同じ機能

Question

との 2 つのボタンがbtnAddありbtnUpdateます。btnUpdate次のようなWebページのいくつかのフィールドを検証するためのボタンのjquery関数を作成しました。

$(function() {

  $('#<%=btnUpdate.ClientID %>').click(function() {
    code here
    });
});

btnAddがクリックされたときに同じことをしたい。そのため、btnAdd に対して同じ関数を再度作成する必要があります。これを回避する他の方法はありますか？

（JavaScript関数を1つ書いて、両方のボタンのボタンクリックイベントで同じ関数を呼び出せば問題ありません。しかし、jQueryを使用する方法はありますか？）

score 23 · Accepted Answer

コンマで区切られた 2 つのボタンを選択するだけ ("#add, #update").click... です: コードでは次のようになります。

$(function() { 

  $('#<%=btnUpdate.ClientID %>, #<%=btnAdd.ClientID %>').click(function() { 
    code here 
    }); 
});

score 8 · Accepted Answer

2 つの方法があります。

(1) 両方の要素を一度に選択し、イベントハンドラーをそれらに適用します。

$(function() {
    $('#<%=btnUpdate.ClientID %>, #<%=btnAdd.ClientID %>').click(function() {
        code here
    });
});

(2) 匿名のままにするのではなく、関数に名前を付けます。

function clickHandler() {
  // code here
}

$('#<%=btnUpdate.ClientID %>, #<%=btnAdd.ClientID %>').click(clickHandler);

score 7 · Accepted Answer

私たちはこれをリファクタリングと呼んでいます。これは、あなたをずっと助け、詳細を読み、自分自身に投資し、素晴らしい唯一のリファクタリングの本を購入するのに役立つものです。

あなたの場合、あなたはこれをするべきです：

$(function() {

  $('#<%=btnUpdate.ClientID %>').click(function() {
        validate($this);
    });
  $('#<%=btnAdd.ClientID %>').click(function() {
        validate($this);
    });    

});

function validate(myButton)
{
    // code here
}

あなたがいつもするべきであるように。

しかし、jQueryとして、複数の入力を持つセレクターを持つことができるので、あなたがする必要があるのは：

$('#<%=btnUpdate.ClientID %>, #<%=btnAdd.ClientID %>').click(function() { 
    validate($this);
}

score 0 · Accepted Answer

jQueryはJavaScriptフレームワークであり、別の言語ではないため、ここでも1つのJavaScript関数を記述できます。

function validateFields(e) {
    code here;
}

$(function() {
  $('#<%=btnUpdate.ClientID %>').click(validateFields);
  $('#<%=btnAdd.ClientID %>').click(validateFields);
});

javascript - jQuery の 2 つのボタンの同じ機能

4 に答える 4

Related

Reference