To break up your jQuery code into functions, do you do it the same way as in JavaScript?

Question

I've been writing some jQuery functions that have JavaScript variables and looping, etc inside them - they're becoming long and hard to read. If I want to break them up, how would I do that?

    $(".x").click(function ()
    {
      var i=0;
      for (i=0;i<50;i++)
      {
        if ($("#x"+i).is(':hidden'))
        {
          $("#x"+i).show();
        }
        else
        {
          $("#x"+i).hide();
        }
      }
    });

For example, in the code above, if I want to move the contents of the loop to a separate function and then call that function from inside the loop, what would that need to look like?

Answer 1

jQuery is javascript, so you can pass functions around just like you would normally do.

// first refactor - separate the function out
$(".x").click(myfunc);

function myfunc() {
{
  var i=0;
  for (i=0;i<50;i++)
  {
    if ($("#x"+i).is(':hidden'))
    {
      $("#x"+i).show();
    }
    else
    {
      $("#x"+i).hide();
    }
  }
}

Although looking at your code it is screaming for all x1 to x50 elements to have the same class applied to it. like so...

<div id='x1' class='xClass'></div>
<div id='x2' class='xClass'></div>
<div id='x3' class='xClass'></div>
.....
<div id='x50' class='xClass'></div>

Then you could do something like

var currentHidden = $('.xClass:hidden')
var currentVisible = $('.xClass:visible')
currentHidden.show();
currentVisible.show();

and yes toggle is even better

$('.xClass').toggle();

then you don't have to loop, which is one of the beauties of using jQuery! =)

Answer 2

The difference between a jQuery function and a JavaScript function is non-existent since jQuery really is javascript.

$(".x").click(DoTheThingYouDo);

function DoTheThingYouDo()
{
  var i=0;
  for (i=0;i<50;i++)
  {
      $("#x"+i).toggle();
  }
}

You can use the toggle() call to show and hide... You could also in theory use a CSS class and just toggle all of the DOM elements that have that class...

$(".x").click(DoTheThingYouDo);

function DoTheThingYouDo()
{
   $(".myclass").toggle();
}

Answer 3

There is no such thing as "JQuery functions", the JQuery code just usually uses an anonymous Javascript function.

To move the contents of the loop into a named function would look like this:

$(".x").click( function() {
  for (var i=0; i<50; i++) toggleItem(i)
});

function toggleItem(i) {
  if ($("#x"+i).is(':hidden')) {
    $("#x"+i).show();
  } else {
    $("#x"+i).hide();
  }
}

However, you could use the cascading properties of CSS to toggle all the items with a simple javascript statement instead of looping through all the elements. Example:

CSS:

<style type="text/css">
.StateOne .InitiallyHidden { display: none; }
.StateTwo .InitiallyVisible { display: none; }
</style>

HTML:

<div class="StateOne" id="StateContainer">
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
   <div class="InitiallyVisible">Visible first</div>
   <div class="InitiallyHidden">Visible second</div>
</div>

Javascript:

$('.x').click(function() {
   var s = document.getElementById('StateContainer');
   s.className = (s.className == 'StateOne' ? 'StateTwo' : 'StateOne');
});