jquery - ワンクリック機能で 2 つの id 要素に対して同じ機能をコーディングできますか?

Question

1 回のクリック機能で 2 つの異なる id 要素のクリック機能を同じコーディングにする方法はありますか?

たとえば、id を持つ 2 つのリンク要素 myFormsTabSubmitted と formStatusSubmitted があります。どちらのリンクも同じ機能です。これらの両方のリンクをクリックすると、同じ div 要素 (「送信済み」) が表示され、他の div は非表示になります。

myFormsTabSubmitted 用と formStatusSubmitted 用の 2 つのクリック関数を記述する代わりに、両方に対して 1 つのクリック関数を使用できますか? お気に入り

$('#myFormsTabSubmitted #formStatusSubmitted').click(function(){
            $('#allMyForms').hide();
            $('#draftedMyForms').hide();
            $('#submittedMyForms').show();
            $('#myFormsTab').find(".selected").removeClass();
            $('#myFormsTabSubmitted').addClass("selected");
        });

score 22 · Accepted Answer

セレクターでコンマ区切りを使用するだけです。

$("#myFormsTabSubmitted, #formStatusSubmitted").click(function() {
  // do stuff
});

score 8 · Accepted Answer

そうです！コードへの最も簡単な変更は、コンマを追加することです。

$('#myFormsTabSubmitted, #formStatusSubmitted').click(...);

クリックハンドラーへの参照を保存し、それを複数の選択に追加することもできます。

var myHandler = function () { ... };
$('#myFormsTabSubmitted').click(myHandler);
$('#formStatusSubmitted').click(myHandler);

score 1 · Accepted Answer

明らかにコンマが適していますが、どの言語の関数も、複数の項目に対してコードを 1 回記述するという目的のために設計されていることを指摘したいと思います。jquery のドキュメントは、関数はイベントに従わなければならないという印象を与えると思いますが、そうではありません。あなたは行くことができます：

function formSubmit() {
                        $('#allMyForms').hide();
                        $('#draftedMyForms').hide();
                        $('#submittedMyForms').show();
                        $('#myFormsTab').find(".selected").removeClass();
                        $('#myFormsTabSubmitted').addClass("selected");
}

$('#myFormsTabSubmitted, #formStatusSubmitted').click(formSubmit);

また

$('#myFormsTabSubmitted').click(formSubmit);
$('#formStatusSubmitted').click(formSubmit);

このようにして、その関数をさらに別のイベントに使用したい場合、特にそれが onClick でない場合は、それを絞り込む必要はありません。

score 0 · Accepted Answer

jquery が $('#id') のようなオブジェクトを作成すると、$() パラメータで渡された文字列を取得し、その文字列 jquery がオブジェクトを返します。そして、jQuery によって返されるそのオブジェクトは、jQuery イベントまたはプロパティのすべてのアクションを実行する jQuery の単なる別のオブジェクトです。したがって、使用する場合:

$('#myFormsTabSubmitted, #formStatusSubmitted').click();

jQuery は、2 つの JavaScript オブジェクトのオブジェクトを返します。そのため、これらの要素の両方で機能するか、カンマ区切りで任意の数の要素を入力できます。

jquery - ワンクリック機能で 2 つの id 要素に対して同じ機能をコーディングできますか?

4 に答える 4

Related

Reference