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

두 기능 간 jQuery 클릭 토글

요소를 한 번 클릭했는지 아니면 여러 번 클릭했는지에 따라 다른 작업을 실행해야 합니까? jQuery를 사용하여 이를 달성하는 방법은 다음과 같습니다.

내장 .toggle() 메서드

jQuery는 두 가지 .toggle() 메서드를 제공합니다.

• 한 가지 방법은 요소의 가시성을 전환합니다.
• A 토글(func1, func2)이라고 불리는 더 이상 사용되지 않는 메서드(jQuery 1.9에서 제거됨)는 요소 클릭 시 두 함수 간 전환을 효율적으로 처리합니다.

사용자 정의 플러그인 구현

플러그인으로서 이 기능은 다음과 같이 구현할 수 있습니다. 다음:

(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));

사용

플러그인을 사용하여 다음을 호출할 수 있습니다.

$('#test').clickToggle(function() {   
    $(this).animate({
        width: "260px"
    }, 1500);
},
function() {
    $(this).animate({
        width: "30px"
    }, 1500);
});

구체적인 예

원래 질문을 토대로 다음과 같이 원하는 기능을 얻을 수 있습니다. 다음:

var count = 0;
$("#time").clickToggle(
    function() {
        $(this).animate({
            width: "260px"
        }, 1500);
    },
    function() {
        $(this).animate({
            width: "30px"
        }, 1500);
    }
);

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