Jump to content

The ultimate community for Ruby on Rails developers.


Photo

jQuery DRY question


  • Please log in to reply
2 replies to this topic

#1 Rowel

Rowel

    Controller

  • Members
  • 109 posts

Posted 30 September 2013 - 03:29 PM

I'm not an expert in jQuery and need help. 

 

How can I simplify this and make it more DRY?  I have about 10 of these and they all perform almost the same thing, except the different #div ids. 

  // ABOUT menu 
  $(document).ready(function()
    {
      $("#mnuAbout").click(function() {
        if ( $( "#about-panel" ).is( ":hidden" ) ) {
          hideallpanels();
          $( "#about-panel" ).slideDown();
        } else {
          $( "#about-panel" ).slideUp();
        } // if
      });
    });
    


  // MISSIONS menu 
  $(document).ready(function()
    {
      $("#mnuMissions").click(function() {
        if ( $( "#missions-panel" ).is( ":hidden" ) ) {
          hideallpanels();
          $( "#missions-panel" ).slideDown();
        } else {
          $( "#missions-panel" ).slideUp();
        } // if
      });
    });

.... and so on and so forth .... 

    

Thanks!

 



#2 Jamie

Jamie

    Controller

  • Moderators
  • 114 posts
  • LocationThe UK

Posted 30 September 2013 - 06:06 PM   Best Answer

What I would do with this is add a generic class like 'menu' to anything you wish to attach this function to and then use a a $(this) and $(this).parent(). on the functions inside if that makes sense.

 

 

I'm not an expert in jQuery and need help. 

 

How can I simplify this and make it more DRY?  I have about 10 of these and they all perform almost the same thing, except the different #div ids. 

  // ABOUT menu 
  $(document).ready(function()
    {
      $("#mnuAbout").click(function() {
        if ( $( "#about-panel" ).is( ":hidden" ) ) {
          hideallpanels();
          $( "#about-panel" ).slideDown();
        } else {
          $( "#about-panel" ).slideUp();
        } // if
      });
    });
    


  // MISSIONS menu 
  $(document).ready(function()
    {
      $("#mnuMissions").click(function() {
        if ( $( "#missions-panel" ).is( ":hidden" ) ) {
          hideallpanels();
          $( "#missions-panel" ).slideDown();
        } else {
          $( "#missions-panel" ).slideUp();
        } // if
      });
    });

.... and so on and so forth .... 

    

Thanks!

 


Rails developer based in Newcastle, UK.
Web app owner - Twitter lover

#3 Rowel

Rowel

    Controller

  • Members
  • 109 posts

Posted 30 September 2013 - 06:27 PM

Thanks Jamie.... 

 

got it working

 

var menu = [ "about", "missions" ];

  // setup click events
    $(document).ready(function()
    {
      $.each( menu, function(ndx, item) {
        $("#mnu-" + item).click(function() {
          mnupanel = "#" + item + "-panel";
          // alert (item);
          if ($( mnupanel ).is(":hidden")) {
            hideallpanels();
            $(mnupanel).slideDown();
          } else {
            $(mnupanel).slideUp();
          } // if
        });
        return;
      });
    });

 

PS: For some reason, the "this" isn't working... it's pulling up the URL of the page, instead of the items in the array.  

I had to do this function(ndx, item),  and then use item.  






0 user(s) are reading this topic

0 members, 0 guests, 0 anonymous users