web-dev-qa-db-ja.com

複数の要素に対するjQueryの同じクリックイベント

ページ上の異なる要素に対して同じコードを実行する方法はありますか？

$('.class1').click(function() {
   some_function();
});

$('.class2').click(function() {
   some_function();
});

代わりに次のようにします。

$('.class1').$('.class2').click(function() {
   some_function();
});

ありがとう

jqueryevents
390
Kelvin
$('.class1, .class2').on('click', some_function);

または

$('.class1').add('.class2').on('click', some_function);

これは既存のオブジェクトでも機能します。

const $class1 = $('.class1');
const $class2 = $('.class2');
$class1.add($class2).on('click', some_function);
781
Eevee

私は通常onの代わりにclickを使います。それは私がより多くのイベントリスナーを特定の機能に追加することを可能にします。

$(document).on("click touchend", ".class1, .class2, .class3", function () {
     //do stuff
});

それが役に立てば幸い！

89
bzin
$('.class1, .class2').click(some_function);

必ず$（ '。class1、space here.class2'）のようなスペースを入れてください。そうしないとうまくいきません。

35
coolguy

複数のセレクタに$('.myclass1, .myclass2, .myclass3')を使うだけです。また、既存の関数をクリックイベントにバインドするためのラムダ関数は必要ありません。

15
code_burgar

別の方法として、要素が変数として格納されていると仮定します（関数本体の中で複数回アクセスする場合は、これはよく考えられます）。

function disableMinHeight() {
    var $html = $("html");
    var $body = $("body");
    var $slideout = $("#slideout");

    $html.add($body).add($slideout).css("min-height", 0);
};

JQueryチェーンを活用して、参照を使用できるようにします。

9
pimbrouwers

要素を変数（jQueryオブジェクト）として保持している、または保持したい場合は、それらをループ処理することもできます。

var $class1 = $('.class1');
var $class2 = $('.class2');

$([$class1,$class2]).each(function() {
    $(this).on('click', function(e) {
        some_function();
    });
});
2
frzsombor

このようなクラスのカンマ区切りリストを追加します。

jQuery(document).ready(function($) {

$('.class, .id').click(function() { 

//  Your code

    }

});
2
Dev

以下のようにコーディングすることもできます。ここではblurイベントを使用しました。

$("#proprice, #proqty").blur(function(){
      var price=$("#proprice").val();
      var qty=$("#proqty").val();
      if(price != '' || qty != '')
      {
          $("#totalprice").val(qty*price);
      }
  });
1
Nitin Pawar

同じイベントで処理する必要がある多くの入力フィールドを含むオブジェクトへのリンクがあります。だから私は単純に find（） を使って、イベントを持つ必要がある内部オブジェクトをすべて取得します。

var form = $('<form></form>');
// ... apending several input fields

form.find('input').on('change', onInputChange);

あなたのオブジェクトがリンクの1つ下のレベルにある場合、 children（） 代わりに find（） メソッドを使うことができます。

0
Andrii Bogachenko

上記の優れた例と答えに加えて、それらのクラスを使用して2つの異なる要素に対して「検索」を実行することもできます。例えば：

<div class="parent">
<div class="child1">Hello</div>
<div class="child2">World</div>
</div>

<script>
var x = jQuery('.parent').find('.child1, .child2').text();
console.log(x);
</script>

これは "HelloWorld"を出力するはずです。

0
Arkhaine