I want to write the best jQuery code

Question

I am relatively new to jQuery, and while I am trying to learn, I am so anxious that I am doing things ... well, I’m not mistaken ... but not necessarily right.

I have a script below that works fine and does what I need. But looking at this, I am not satisfied, is this really the best way to achieve my goal, or am I too picky?

A brief description of what I'm creating: a search form containing a dynamically generated field. Each field has 2 classes to indicate whether it should appear in a quick and / or advanced search form. Two links to switch between the two views.

function searchModes() { $('p.quicksearch-true.advancedsearch-true').show(); $('p.quicksearch-true.advancedsearch-false').show(); $('p.quicksearch-false.advancedsearch-true').hide(); $('p.quicksearch-false.advancedsearch-false').hide(); $('#advanced').show(); $('#quick').hide(); $('#advanced').click(function () { $('p.quicksearch-true.advancedsearch-true').show(); $('p.quicksearch-true.advancedsearch-false').hide(); $('p.quicksearch-false.advancedsearch-true').show(); $('#advanced').toggle(); $('#quick').toggle(); return false; }); $('#quick').click(function () { $('p.quicksearch-true.advancedsearch-true').show(); $('p.quicksearch-true.advancedsearch-false').show(); $('p.quicksearch-false.advancedsearch-true').hide(); $('#advanced').toggle(); $('#quick').toggle(); return false; }); } 

HTML is as follows:

 <a href="#" id="quick">quick</a><a href="#" id="advanced">advanced</a> <p class="quicksearch-true advancedsearch-true"> Some dynamically generated form field that appears in both quick and advanced search </p> <p class="quicksearch-true advancedsearch-false"> Some dynamically generated form field that appears in quick search only </p> <p class="quicksearch-false advancedsearch-true"> Some dynamically generated form field that appears in advanced search only </p> <p class="quicksearch-false advancedsearch-false"> Should never occur, but if it did, it would remain hidden anyway </p> 

So, really, I get any feedback that may come up that may help me try to write Better jQuery.

Very valuable!

Answer 1

HTML:

 <a href="#" id="quick" class="button" data-fields="q-field">Show Quick Form</a> <a href="#" id="advanced" class="button" data-fields="a-field">Show Advanced Form</a> <p class="field q-field a-field"> Some dynamically generated form field that appears in both quick and advanced search </p> <p class="field q-field"> Some dynamically generated form field that appears in quick search only </p> <p class="field a-field"> Some dynamically generated form field that appears in advanced search only </p> <p class="field"> Should never occur, but if it did, it would remain hidden anyway </p> 

Simplified jQuery:

 $(function() { $('#advanced').show(); $('.button').click(function(e){ e.preventDefault(); $('.button').toggle('show'); $('.field').hide().parent().find('p.' + $(this).data('fields')).show(); }); }); 

http://jsfiddle.net/AlienWebguy/jsGmD/

Answer 2

Here's the best way you can expand to as many search modes as you like by simply adding more to your HTML. JQuery will work for any number of modes. jsFiddle .

JQuery

 $('.search-modes').children().click(function() { $(this).hide().siblings().show(); //Hide this button, show the others var mode = $(this).data('mode'); //What mode are we in? $('.search').children().each(function() { if($(this).hasClass(mode)) $(this).show(); //Show things that are in this mode else $(this).hide(); //Hide the rest }); return false; }).first().click(); //Start in quick mode 

HTML:

 <div class="search-modes"> <a href="#" data-mode="quick">quick</a> <a href="#" data-mode="advanced">advanced</a> </div> <div class="search"> <p class="quick advanced"> Some dynamically generated form field that appears in both quick and advanced search </p> <p class="quick"> Some dynamically generated form field that appears in quick search only </p> <p class="advanced"> Some dynamically generated form field that appears in advanced search only </p> <p> Should never occur, but if it did, it would remain hidden anyway </p> </div> 

Answer 3

In short, your code and markup is too bloated for what you are trying to do.

I would scale down the markup to look more like this:

a) General fields are always displayed on the screen and are not hidden / displayed b) A case that should never happen is deleted - it has no relation to the problem c) You do not have true / false versions of classes - they are logical; either there or not

 <a href="#" id="quick">quick</a><a href="#" id="advanced">advanced</a> <p> Some dynamically generated form field that appears in both quick and advanced search </p> <p class="quicksearch"> Some dynamically generated form field that appears in quick search only </p> <p class="advancedsearch"> Some dynamically generated form field that appears in advanced search only </p> 

Then your jQuery gets a lot cleaner.

 $('#quick').toggle(); $('.advancedsearch').hide(); $('#advanced').click(function () { $('p.quicksearch').hide(); $('p.advancedsearch').show(); $('#advanced').toggle(); $('#quick').toggle(); }); $('#quick').click(function () { $('p.quicksearch').show(); $('p.advancedsearch').hide(); $('#advanced').toggle(); $('#quick').toggle(); }); 

Here's a live example: http://jsfiddle.net/6nkXN/

Answer 4

Without changing the layout:

 function searchModes() { $('.quicksearch-true').show(); $('.quicksearch-false').hide(); $('#advanced').show(); $('#quick').hide(); $('#advanced').click(function () { $('.advancedsearch-true').show(); $('.advancedsearch-false').hide(); $('#advanced, #quick').toggle(); return false; }); $('#quick').click(function () { $('.quicksearch-true').show(); $('.quicksearch-false').hide(); $('#advanced, #quick').toggle(); return false; });