CODEWITHSUNDEEP
jquery
Robert
Robert

Reputation:

How to improve this jQuery toggle method

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?

Upvotes: 3

Views: 787

Answers (2)

Shog9
Shog9

Reputation: 159678

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

Upvotes: 6

Smith
Smith

Reputation:

I think you should go through javascript closure.

Using javascript closure you javascript can be rewritten as 

<script language="javascript">
    var click = 0;
    $('#div-toggle').toggle(
        toggle('format1'),
        toggle('format2', 'format1'),
        toggle('format3', 'format2')
    );

    function toggle(add, remove){
        return function(){
            var el = $('#div-toggle');
            if(remove){
                el.removeClass(remove);
            }
            el.addClass(add);

            el.html('No. of clicks: ' + click++);
        }
    }
</script>

I hope this will solve your problem.

You can use some of these resources to learn about closures
http://www.jibbering.com/faq/faq_notes/closures.html
http://www.javascriptkit.com/javatutors/closures.shtml
http://ejohn.org/apps/learn/#48

Upvotes: 1

Related Questions