j여러 요소에 대해 동일한 클릭 이벤트 쿼리

j여러 요소에 대해 동일한 클릭 이벤트 쿼리

페이지의 다른 요소에 대해 동일한 코드를 실행할 수 있는 방법이 있습니까?

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

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

대신 다음과 같은 작업을 수행합니다.

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

감사해요.

$('.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);

주로 사용합니다.on대신에click특정 기능에 더 많은 이벤트 수신기를 추가할 수 있습니다.

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

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

$(.class1, space here.class2')와 같은 공백을 넣지 않으면 작동하지 않습니다.

간단히 사용$('.myclass1, .myclass2, .myclass3')다중 선택기용입니다.또한 클릭 이벤트에 기존 함수를 바인딩하기 위해 람다 함수가 필요하지 않습니다.

요소가 변수로 저장되어 있다고 가정하는 또 다른 방법(기능 본체에서 요소에 여러 번 액세스하는 경우 종종 좋은 방법):

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

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

jQuery 체인을 활용하여 참조를 사용할 수 있습니다.

요소를 변수(jQuery 개체)로 유지하거나 유지하려는 경우 요소를 루프오버할 수도 있습니다.

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

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

우리는 또한 다음과 같이 코딩할 수 있습니다, 저는 여기서 블러 이벤트를 사용했습니다.

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

다음과 같이 쉼표로 구분된 클래스 목록을 추가합니다.

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

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

//  Your code

    }

});

동일한 이벤트에서 처리해야 하는 입력 필드가 많은 개체에 대한 링크가 있습니다.그래서 저는 단순히 find()를 사용하여 이벤트를 가져야 하는 모든 내부 객체를 가져옵니다.

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

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

객체가 한 단계 아래에 있는 경우 링크 하위() 대신 find() 메서드를 사용할 수 있습니다.

위의 우수한 예제와 답변 외에도 클래스를 사용하여 두 개의 서로 다른 요소에 대해 "찾기"를 수행할 수도 있습니다.예:

<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"가 출력됩니다.

언급URL : https://stackoverflow.com/questions/1313373/jquery-same-click-event-for-multiple-elements