jqueryはイベントを複数の要素に同時にバインドできますか?-フロントエンドQ&A-php.cn

jqueryはイベントを複数の要素に同時にバインドできますか?

WBOY

リリース： 2022-04-26 17:31:26

オリジナル

2660 人が閲覧しました

jquery はイベントを複数の要素にバインドできます。バインド方法: セレクターを使用して要素を選択する場合、要素セレクターをカンマで区切ってイベントを複数の要素にバインドし、複数のセレクターの混合使用をサポートします。構文は「$(要素 1, 要素 2, 要素 3.. .).Event (イベントハンドラー関数)」。

jqueryはイベントを複数の要素に同時にバインドできますか?

このチュートリアルの動作環境: Windows10 システム、jquery3.2.1 バージョン、Dell G3 コンピューター。

jquery は同時に複数の要素にイベントをバインドできますか?

開発プロセス中に、テーブル内の各行または列に同じイベントをバインドすることに遭遇しました。使用されるメソッドは jquery です。列要素を走査し、foreach を使用してイベントを各セルにバインドします。今日説明するのは、異なる要素に対して同じクリックイベントをインタラクティブにトリガーするバインド方法です。

具体的な方法は次のとおりです:

$("#id1, .class1, #id2, .class2").unbind("click").click(function(){
    console.log("test");
})

ログイン後にコピー

セレクターを使用して要素を選択する場合は、英語のカンマを使用して要素を区切ります。同時にセレクターの混合使用がサポートされているため、同じイベントはさまざまな要素にバインドできます。

例は次のとおりです:

<html>
<head>
<script type="text/javascript" src="/jquery/jquery.js"></script>
<script type="text/javascript">
$(document).ready(function(){
  $(".bt1,#bt1").click(function(){
    $("p").slideToggle();
  });
});
</script>
</head>
<body>
<p>这是一个段落。</p>
<button class="bt1">切换</button>
<button id="bt1">切换</button>
</body>
</html>

ログイン後にコピー

出力結果:

jqueryはイベントを複数の要素に同時にバインドできますか?