Question

是否有更好的方法在点击事件中切换不同的功能？有什么东西可能使用“开”“关”方法或更简单的替代方案？由于切换方法已从最新版本的jQuery中删除，因此该问题的可用答案似乎已被破坏，因此再次询问此问题。

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

    $('#b1').clickToggle(
        function() {alert('First handler');}, 
        function() {alert('Second handler');},
        function() {alert('Third handler');}
        );

我将回答我自己的问题，对于正在寻找替代方法来实现“开”和“关”方法的人来说，这可能会派上用场;

$("#b4").on('click', firstClick)

function firstClick() {
    alert("First Clicked");
    $("#b4").off('click').on('click', secondClick)
}

function secondClick() {
    alert("Second Clicked");
    $("#b4").off('click').on('click', firstClick)
}

Answer 1

＆＃13;

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
  <meta name="Generator" content="EditPlus.com®">
							<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
  <title>stupid example</title>

 </head>
 <body>
 <nav>
 <div>b1</div>
<div>b2</div>
<div>b3</div>
</nav>
<script type="text/javascript">
<!--
$(document).ready(function() {
	(function($) {
        $.fn.clickToggle = function(func1, func2, func3) {
			
    
            var funcs = [func1, func2, func3];
			
            this.data('toggleclicked', 0);
            this.click(function() {
				id= $(this).index();console.log( id );
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(funcs[id], this)();
                //data.toggleclicked = (tc + 1) % 3;
				data.toggleclicked = id
            });
			
            return this;
        };
    }(jQuery));

    //$('#b1').clickToggle(
	$('nav div').clickToggle(
	    function() {alert('First handler');}, 
        function() {alert('Second handler');},
        function() {alert('Third handler');}
	);

});
//-->
</script>
 </body>
</html>

＆＃13;

或更好

＆＃13;

<!doctype html>
<html lang="en">
 <head>
  <meta charset="UTF-8">
							<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>

 </head>
 <body>
 <nav>
 <div>b1</div>
<div>b2</div>
<div>b3</div>
</nav>
<script type="text/javascript">
<!--
$(document).ready(function() {
	(function($) {
        $.fn.clickToggle = function() {
var ta=arguments;
	     this.data('toggleclicked', 0);
            this.click(function() {
				id= $(this).index();console.log( id );
                var data = $(this).data();
                var tc = data.toggleclicked;
                $.proxy(ta[id], this)();
                //data.toggleclicked = (tc + 1) % 3;
				data.toggleclicked = id
            });
			
            return this;
        };
    }(jQuery));

    //$('#b1').clickToggle(
	$('nav div').clickToggle(
	//$('.yes div:nth-child').clickToggle(function() {
	    function() {alert('First handler');}, 
        function() {alert('Second handler');},
        function() {alert('Third handler');}
//...n parameters with n divs filled already will work

	);

});
//-->
</script>
 </body>
</html>

＆＃13;

函数之间的jQuery切换Fn1 Fn2 Fn3单击

1 个答案: