ansaurus

Question

How to improve this jQuery toggle method

Answer 1

+2 A:

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

Smith 2009-08-28 16:20:21

Answer 2

+7 A:

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

Shog9 2009-08-28 16:25:07

ansaurus

tags:

views:

answers:

How to improve this jQuery toggle method

related questions