jQueryを使用してクリックイベントハンドラーにパラメータを渡すにはどうすればよいですか?

jQuery を使用してクリック イベント ハンドラーにパラメータを渡す

jQuery を使用する場合、パラメータを関数内の関数に渡す必要がある場合があります。クリックイベントハンドラ。これは、関数を再利用し、呼び出されるたびに異なるパラメーターを渡す必要がある場合に特に便利です。

最初は、次の例のように、jQuery の .click() ではパラメーターの受け渡しが許可されていないように見えるかもしれません。失敗した試行を示しています:

<code class="js">$('.leadtoscore').click(add_event('shot'));

function add_event(event) {
    // Function logic
}</code>

幸いなことに、この問題には簡単な解決策があります。 .data() メソッドを使用すると、クリック イベント ハンドラーにパラメーターを簡単に渡すことができます。これにより、データを HTML 要素に関連付けることができます。これを実現する方法は次のとおりです。

<code class="js">$('.leadtoscore').data('parameter', 'shot').click(add_event);

function add_event(event) {
    const parameter = $(event.target).data('parameter');
    // Function logic using 'parameter'
}</code>

この方法では、対応する HTML 要素に data 属性を設定し、event.target.data('parameter') 構文を使用してクリック イベント ハンドラー内でそれにアクセスします。

代わりに、jQuery バージョン 1.4.3 以降では、データをイベント ハンドラーに渡すためのより簡潔な方法が導入されました。次のように、パラメーターのオブジェクトを最初の引数として .click() に直接渡すことができます。

<code class="js">$('.leadtoscore').click({ parameter: 'shot' }, add_event);

function add_event(event) {
    const parameter = event.data.parameter;
    // Function logic using 'parameter'
}</code>

これらのメソッドのいずれかを使用すると、クリック イベント ハンドラーにパラメーターを渡すことができ、複数のイベントにわたって再利用します。

以上がjQueryを使用してクリックイベントハンドラーにパラメータを渡すにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。