ansaurus

Question

minimize 'n' number of javascript functions into one function in jquery.

Answer 1

+2 A:

jQuery works with a selector and returns an array of elements. You simply need to pass a selector that selects all your elements and call hide(). Let's say all your elements had the "foo" CSS class e.g. <div class='foo'/>, you'd write $('.foo').hide(). Let's say you had two elements with IDs of "thing1" and "thing2". Your selector would be a little different, but you'd still call hide() on the returned array of elements: $('#thing1, #thing2').hide(). show() and hide() modify the display property behind the scenes, you can also modify it directly, for example: $('#thing').css('display', 'block'). Check the jQuery API for more details. Add jQuery to your page, and play around in Firebug console, selecting elements, and hiding and showing them.

Andy Atkinson 2010-08-19 05:00:45

As Naikus said, I may be incorrect about the `hide()` operating on each of the items in the array, I was thinking of some Rails methods that work on arrays. You want to use `$.each()` then for each item call the jQuery function you want on it.

Andy Atkinson 2010-08-20 17:24:50

Answer 2

+1 A:

How about this:

   /**
    * Shows or hides elements specified by array of element IDs, 
    * @param bShow true if you want to show the elements, hide otherwise
    */
   function showHide(arrElemIds, bShow)   {
      $.each(arrElemIds, function(idx, elemId)   {
         if(!!bShow)  {
            $("#" + elemId).show();
         }else  {
            $("#" + elemId).hide();
         }
      }
   }

Then use as:

showHide(["adddiv", "ImageButtonDiv"]); //hide
showHide(["datatable2", "ImageButtonDiv2", "close1"], true); // show
// ...and so on

Edit:

On second thought, I'd rather you have separate functions to show and hide:

   /**
    * Shows specified by array of element IDs, 
    */
   function show(arrElemIds)   {
      $.each(arrElemIds, function(idx, elemId)   {
         $("#" + elemId).show();
      }
   }

   /**
    * Hides elements specified by array of element IDs, 
    */
   function hide(arrElemIds)   {
      $.each(arrElemIds, function(idx, elemId)   {
            $("#" + elemId).hide();
      }
   }

    hide(["adddiv", "ImageButtonDiv"]); //hide
    show(["datatable2", "ImageButtonDiv2", "close1"]); // show

naikus 2010-08-19 05:02:08

Answer 3

+2 A:

There are many ways you can go.

First, instead of document.getElementbyId('something'), in jQuery you can use $('#something'). Instead of using style.display = block and style.display = none, the jQuery way is:

$('#something').hide();
$('#something').show();

or even:

$('#something').toggle();

Next, rather than identify long lists of items by their individual IDs, hopefully your page is structured so you can select by class, or by an enclosing container. If you have ten elements to hide, and they're all inside a div container, don't select each one by ID for hiding. Select the container:

$('#container').find('.setOne').hide(); // assume class "setOne" on all
                                        // elements in a particular group

$('#container_of_datatable2').hide(); // if hiding the container works for you

$('#container_of_datatable2') 
  .find('table, div') // to hide tables or divs within the specific container
  .hide();

If the container approach doesn't work for you (your IDs seem to almost but not quite fit a fixed pattern), you can set up arrays containing selectors for the IDs that work together.

var setOne = ['#datatable4','#adddiv','#imagebuttondiv','#etc'];
var setTwo = ['#something','#something-else','#etc2'];

and then use those something like this:

$( setOne.join(",") ).hide();

It looks like you're trying to wrap your code in functions that have meaningful (to you) names. But those function names seem to be related more closely to the kinds of objects you'll be showing and hiding, than to the business rule. So perhaps instead of HideImageButtonDivclose1forfollowup(), you might have:

function beginFollowup(){
  $( setOne.join(",") ).hide();
  $( setFive.join(",") ).show();
  ...etc...
}

So when you actually sequence these functions and behaviors, your code will be clearer:

beginFollowup();
endFollowup();
if( something ) {
  beginSomeOtherThing();
}

Just some ideas to get you started.

Ken Redler 2010-08-19 05:16:20

ansaurus

tags:

views:

answers:

minimize 'n' number of javascript functions into one function in jquery.

related questions