How to improve this jQuery toggle method

jquery

Solution

Write a function to generate callbacks:

var click = 0; // keep track of how many times user has clicked

// Generates an event handler that will remove oldClass, add newClass, increment 
// click, and update the element text whenever it is called.
function ClassSwapper(oldClass, newClass)
{
  return function()
  {
    $(this)
      .removeClass(oldClass)
      .addClass(newClass)
      .html('No. of clicks: ' + ++click);

  };
}

// generate three event handlers for toggle, such that the three
// format classes are cycled.
$('#div-toggle').toggle(
  ClassSwapper('format3', 'format1'),
  ClassSwapper('format1', 'format2'),
  ClassSwapper('format2', 'format3')
  );

Note that `toggle()` rotates handlers from last back to first, so you probably want your first handler to remove the class added by the last one...

Since you're keeping a counter, you could just avoid `toggle()` entirely, and combine the counter, a list of classes to cycle through, and a `click` event handler:

// number of times user has clicked, and also index of *next* class to use
var click = 0; 
$("#div-toggle").click(function()
{
  // classes to cycle through
  var classes = ['format1', 'format2', 'format3'];

  // removes previous class, adds new one.
  // note that, for brevity, this takes advantage of
  // a detail specific to JavaScript arrays: negative indexes are 
  // interpreted as property names, so the first time this is called,
  // removeClass() will be passed the value of classes["-1"] (which will
  // return undefined) and will as a result do nothing.
  $(this)
    .removeClass(classes[(click-1)%classes.length])
    .addClass(classes[(click)%classes.length])
    .html('No. of clicks: ' + ++click);
});

Problem

I'm trying to learn jquery, I've some basics of javascript. I've written this piece of code to toggle between 3 functions, it works fine ``` var click = 0; $('#div-toggle').toggle( function() { var el = $('#div-toggle'); el.addClass('format1'); el.html('No. of clicks: ' + click++); }, function() { var el = $('#div-toggle'); el.removeClass('format1'); el.addClass('format2'); el.html('No. of clicks: ' + click++); }, function() { var el = $('#div-toggle'); el.removeClass('format2'); el.addClass('format3'); el.html('No. of clicks: ' + click++); } ); ``` ``` <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script> <div id="div-toggle">Click here to toggle</div> ``` Here if you see the contents of all the functions in the toggle is similar. How can I improve this by moving this code to use a single function?

Original source