>웹 프론트엔드 >프런트엔드 Q&A >jquery가 동시에 여러 요소에 이벤트를 바인딩할 수 있나요?

jquery가 동시에 여러 요소에 이벤트를 바인딩할 수 있나요?

WBOY
WBOY원래의
2022-04-26 17:31:262714검색

jquery는 이벤트를 여러 요소에 함께 바인딩할 수 있습니다. 바인딩 방법: 셀렉터를 사용하여 요소를 선택할 경우 요소 셀렉터를 영문 쉼표로 구분하여 이벤트를 여러 요소에 함께 바인딩할 수 있으며, 여러 셀렉터의 혼합 사용을 지원합니다. 구문은 "$(element 1, Element 2, 요소 3...).이벤트(이벤트 핸들러 함수)".

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가 동시에 여러 요소에 이벤트를 바인딩할 수 있나요?추천 관련 동영상 튜토리얼:

jQuery 동영상 튜토리얼

위 내용은 jquery가 동시에 여러 요소에 이벤트를 바인딩할 수 있나요?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

성명:
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.