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

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

Mary-Kate Olsen
Mary-Kate Olsen원래의
2024-11-08 16:31:02383검색

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!

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