jQuery를 사용하여 클릭 시 기능 간을 전환하는 방법은 무엇입니까?

jQuery를 사용하여 클릭 시 함수 간 전환

jQuery에서는 요소를 클릭할 때 함수를 전환하는 작업을 다른 메서드로 수행할 수 있습니다.

내장 jQuery .toggle()

jQuery는 두 가지 버전의 .toggle() 메서드를 제공합니다. 가시성 전환에 사용되는 질문에 언급된 것은 이제 더 이상 사용되지 않습니다. 그러나 클릭 시 기능 간 전환을 위해 특별히 설계된 대체 버전이 있습니다.

$(selector).toggle(function1, function2);

이 방법은 두 기능을 인수로 받아들이고 클릭할 때마다 두 기능을 번갈아 사용합니다.

사용자 정의 플러그인

대안으로 보다 다양한 구현을 제공하는 사용자 정의 플러그인을 생성할 수도 있습니다. "clickToggle"이라고 불리는 이 플러그인을 사용하면 여러 기능을 할당할 수 있으며 모든 이벤트에 사용할 수 있습니다.

$.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) % funcs.length;
    });
    return this;
};

이 플러그인을 사용하려면 함수를 인수로 지정하세요.

$('#element').clickToggle(function1, function2);

개선된 구현

제공된 코드는 더 나은 성능을 위해 더욱 최적화될 수 있습니다.

$(function() {
    var clickCallbacks = [function1, function2];
    $('#element').click(function() {
        clickCallbacks[$(this).data('toggleclicked')++]();
    });
});

이 접근 방식은 클릭 핸들러만 할당하여 함수 호출 수를 크게 줄입니다. 한 번만 실행하면 실행 시간이 더 빨라집니다.

위 내용은 jQuery를 사용하여 클릭 시 기능 간을 전환하는 방법은 무엇입니까?의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!