> 웹 프론트엔드 > JS 튜토리얼 > 클릭 이벤트에서 함수 호출을 대체하는 방법은 무엇입니까?

클릭 이벤트에서 함수 호출을 대체하는 방법은 무엇입니까?

Mary-Kate Olsen
풀어 주다: 2024-11-08 16:31:02
원래의
359명이 탐색했습니다.

How to Alternate Function Calls on Click Events?

클릭 이벤트로 교대 함수 호출

질문:

요소를 클릭할 때 다른 기능을 어떻게 실행할 수 있나요? 연속해서 클릭할 때마다 번갈아 가나요?

답변:

jQuery는 이 목적을 위해 특별히 설계된 .toggle() 메서드의 대체 버전을 제공합니다. 더 이상 사용되지 않습니다. 원하는 기능을 제공하는 사용자 정의 플러그인을 생성하는 등의 대체 접근 방식이 있습니다.

더 이상 사용되지 않는 .toggle() 메서드 사용:

$('#element').toggle(function() {
  // Function 1
}, function() {
  // Function 2
});
로그인 후 복사

맞춤 플러그인:

(function($) {
  $.fn.clickToggle = function(func1, func2) {
    var funcs = [func1, func2];
    this.data('toggleclicked', 0);
    this.click(function() {
      var data = $(this).data();
      var tc = data.toggleclicked;
      $.proxy(funcs[tc], this)();
      data.toggleclicked = (tc + 1) % 2;
    });
    return this;
  };
}(jQuery));

$('#element').clickToggle(function() {
  // Function 1
}, function() {
  // Function 2
});
로그인 후 복사

참고:

  • 맞춤 플러그인은 클릭뿐만 아니라 모든 이벤트에 사용할 수 있습니다.
  • 임의의 함수 수를 교대로 실행할 수 있습니다.
  • 더 이상 사용되지 않는 .toggle() 메서드는 복잡한 시나리오에서 성능 문제를 일으킬 수 있습니다.

위 내용은 클릭 이벤트에서 함수 호출을 대체하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!

원천:php.cn
본 웹사이트의 성명
본 글의 내용은 네티즌들의 자발적인 기여로 작성되었으며, 저작권은 원저작자에게 있습니다. 본 사이트는 이에 상응하는 법적 책임을 지지 않습니다. 표절이나 침해가 의심되는 콘텐츠를 발견한 경우 admin@php.cn으로 문의하세요.
저자별 최신 기사
인기 튜토리얼
더>
최신 다운로드
더>
웹 효과
웹사이트 소스 코드
웹사이트 자료
프론트엔드 템플릿