Skrócenie kodu .js, wątek pomocy w skracaniu istniejącego kodu Opcje

[Orgin]

Witam - mam taki kod jak poniżej, ale chciałbym umieścić 500 elementów. Ręczne wbijanie tylu elementów jest drakońskie. Jak to skrócić?
registration = function (local_conf)
{
if (typeof jQuery === 'undefined') {
throw 'registration exception: jQuery not found.';
}

var conf = {};

conf.boxId = null;
conf.env = null;

/**
* @param {Object} data
*/
var init = function (local_conf)
{
conf = jQuery.extend(conf, local_conf);

//
init = function () { };


jQuery( 'div.chamber_menu a' ).click( function()
{
var menuType = this.name;

jQuery( 'div.chamber_menu a' ).attr( 'class', '' );
jQuery( this ).attr( 'class', 'active' );

switch(menuType) {
case '0-1':
jQuery('div.form-2').hide();
jQuery('div.form-3').hide();
jQuery('div.form-4').hide();
jQuery('div.form-5').hide();
jQuery('div.form-1').show();
jQuery('div.form-6').hide();
jQuery('div.form-7').hide();
jQuery('div.form-8').hide();
break;
case '0-2':
jQuery('div.form-2').show();
jQuery('div.form-1').hide();
jQuery('div.form-3').hide();
jQuery('div.form-4').hide();
jQuery('div.form-5').hide();
jQuery('div.form-6').hide();
jQuery('div.form-7').hide();
jQuery('div.form-8').hide();
break;
case '0-3':
jQuery('div.form-1').hide();
jQuery('div.form-2').hide();
jQuery('div.form-4').hide();
jQuery('div.form-3').show();
jQuery('div.form-5').hide();
jQuery('div.form-6').hide();
jQuery('div.form-7').hide();
jQuery('div.form-8').hide();
break;
case '0-4':
jQuery('div.form-1').hide();
jQuery('div.form-2').hide();
jQuery('div.form-3').hide();
jQuery('div.form-5').hide();
jQuery('div.form-6').hide();
jQuery('div.form-4').show();
jQuery('div.form-7').hide();
jQuery('div.form-8').hide();
break;
case '0-5':
jQuery('div.form-1').hide();
jQuery('div.form-2').hide();
jQuery('div.form-3').hide();
jQuery('div.form-4').hide();
jQuery('div.form-6').hide();
jQuery('div.form-7').hide();
jQuery('div.form-5').show();
jQuery('div.form-8').hide();
break;
case '0-6':
jQuery('div.form-1').hide();
jQuery('div.form-2').hide();
jQuery('div.form-3').hide();
jQuery('div.form-4').hide();
jQuery('div.form-6').show();
jQuery('div.form-5').hide();
jQuery('div.form-7').hide();
jQuery('div.form-8').hide();
break;
case '0-7':
jQuery('div.form-1').hide();
jQuery('div.form-2').hide();
jQuery('div.form-3').hide();
jQuery('div.form-4').hide();
jQuery('div.form-7').show();
jQuery('div.form-5').hide();
jQuery('div.form-6').hide();
jQuery('div.form-8').hide();
break;
case '0-8':
default:
jQuery('div.form-1').hide();
jQuery('div.form-2').hide();
jQuery('div.form-3').hide();
jQuery('div.form-4').hide();
jQuery('div.form-5').hide();
jQuery('div.form-8').show();
jQuery('div.form-6').hide();
jQuery('div.form-7').hide();
break;
}

return false;
});
};

jQuery(document).ready(
function ()
{
init(local_conf);
}
);
}

[Crozin]

@zegarek84: Mamy linię najmniejszego oporu, nie najmniejszą linię oporu. (IMG:style_emoticons/default/wink.gif)
@Orgin: Masz kilka podstawowych błędów. Przede wszystkim CSS-owskie klasy traktujesz jako identyfikatory. Powinieneś wszystkim tym formularzom nadać jedną wspólną klasę oraz każdemu z osobna unikalny identyfikator:

[HTML] pobierz, plaintext 
<form ... class="my-form" id="my-form-1">...</form>
<form ... class="my-form" id="my-form-2">...</form>
...
<form ... class="my-form" id="my-form-n">...</form>
[HTML] pobierz, plaintext 

Dzięki temu będziesz mógł wygodnie operować tak na wszystkich formularzach jak i na każdym z osobna.

[JAVASCRIPT] pobierz, plaintext 
(function($) {
    "use strict";
 
    var $menuLinks = $("div.chamber_menu a");
    var $forms = $(".my-form");
 
    $menuLinks.on("click", function(e) {
        e.preventDefault();
 
        // Nie kasuj wszystkich klas, a jedynie tą, która Cię interesuje
        $menuLinks.removeClass("active");
        $(this).addClass("active");
 
        $forms.hide();
        $("#my-form-" + this.name).show();
    });
})(window.jQuery);
[JAVASCRIPT] pobierz, plaintext