jQuery Toggle Between Functions Fn1 Fn2 Fn3 On Click

Question

Is there a better way of toggling between different functions, on click events ? Something maybe that use "on" "off" methods or simpler alternative ? Since toggle method has been removed from the newest versions of jQuery, available answers to this problem seem broken,so this question has been asked again.

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

I am going to answer my own question, which might come handy for someone who is looking for an alternative ways to achieving this with "on" and "off" methods;

$("#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)
}

make a global variable =[1,2,3] , make a switch statement with variable ++, put an if condition when it hits 3 set it to 1 . — Mayank Singh Fartiyal, Jan 06 '18 at 11:16

score 1 · Answer 1 · 2018-01-06T12:28:55.510

<!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>

or better

<!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>

jQuery Toggle Between Functions Fn1 Fn2 Fn3 On Click

1 Answers1