jQuery Forum

...besides show "Hello World" type alerts 

I must now ask if there is a BETTER way to do this...

I have a page of subtitles, links and sections. All subtitles and sections are set to "display: none" by default except for the ones that should show by default. The defaults have a class of "selected-text" (subtitles), "selected-sect" (sections), and "selected-link" (links).

When I click a link, I want to highlight that link (add".selected-link"), then show only the subtitle/section that corresponds to that link (add "selected-text" or "selected-sect").

The content to highlight/hide/show has a consistent naming convention:

<p id="dkq-title">Title

      <span id="dkq-subtitle-quotes" class="selected-text">quack</span>

      <span id="dkq-subtitle-data">quack quack</span>

      ...

</p>

The links and sections also have this prefix/suffix scheme for their IDs

So I did the following in jQuery and it works as intended, but since I am an absolute beginner, I am wondering if this is the best way to do this...

jQuery(document).ready(function() {
      var $ = jQuery;
      $.dkqns_display = {
            init: function() {
                  $( "ul#dkq-navlist a" ).click( function( e ) {
                        _switch_display( this );
                        preventDefault( e );
                        return false;
                  });
            },
            switch_display: function( obj ) {
                  _switch_display( $( obj ) );
            }
      }; // END dkqns_display
      function _switch_display( obj ) {
            var clickedId = $( obj ).attr( "id" );

      // snip the unique part of the id
            var suffix = clickedId.substring( 9 );

      // grab the common parts of the subtitle/section IDs, to which I will apply the correct suffix
            var titlePrefix = "dkq-subtitle-";
            var sectPrefix = "dkq-sect-";
      // un-highlight all links
            $( "ul#dkq-navlist a" ).removeClass( "selected-link" );
      // hide all subtitles/sections
            $( "p#dkq-title span" ).removeClass( "selected-text" );
            $( "div#dkq-content section" ).removeClass( "selected-sect" );
      // highlight selected link
            $( "ul#dkq-navlist a#" + clickedId ).addClass( "selected-link" );
      // show selected subtitles/sections
            $( "p#dkq-title span#" + titlePrefix + suffix ).addClass( "selected-text" );
            $( "div#dkq-content section#" + sectPrefix + suffix ).addClass( "selected-sect" );
      }
      $.dkqns_display.init();
});

In the "init" function, I'm aware that preventDefault() prevents a page refresh, which is what I want. A tutorial told me to add "return false;" after that, but did not explain why. Otherwise I know what all this code does.