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);
}
);
}

[zegarek84]

pytanie bo są same przypadki 0-x, a co z przypadkami x-x, czyli np. 1-0, 2-3...

na to co widać to "normalnie"
po prostu zapisz sobie te elementy do tablicy (plus jeszcze mając referencję do tych elementów nie będziesz musiał ich od nowa wyszukiwać) i po najmniejszej linii oporu ukryj wszystkie w pierwszej kolejności a pokaż ten który masz pokazać z tej tablicy, ale mówiąc po najmniejszej linii oporu miałem na myśli byś łatwiej miał zrozumieć... skoro już wszystkie elementy są ukryte a tylko jeden jest widoczny, to możesz po inicjalizacji gdzie wsjo ukryłeś przechowujesz referencję do widocznego, potem ukrywasz ten widoczny a pokazujesz ten nowy element...

ps. dodaj tag "JavaScript" - pewnie mi rozbije ten wyraz ;p

Ten post edytował zegarek84 6.08.2013, 20:27:14

[Orgin]

jestem bardzo słaby jeśli chodzi o .js, więc to co piszesz nic mi nie mówi...

pytanie bo są same przypadki 0-x, a co z przypadkami x-x, czyli np. 1-0, 2-3...

inaczej - można zamienić 0-1 na 1, 0-2 na 2 itd.

dostałem gotowy kod, ale chciałbym rozbudować go, bo mam więcej elementów do ukrycia. Jeśli byłbyś w stanie mi to napisać to bym był zobowiązany, jeśli nie masz ochoty ok peace

Ten post edytował Orgin 6.08.2013, 20:41:53

[SmokAnalog]

Kod jest bardzo brzydki, amatorski. Powinien być przepisany na nowo tak naprawdę.

No ale jeśli chcesz go użyć, to jak słusznie zauważyłeś, pokazywany jest element 0-X. Czyli całą instrukcję switch możesz zamienić na:

[JAVASCRIPT] pobierz, plaintext 
var menuTypeChunks = menuType.split('-');
if(menuTypeChunks.length >= 2) {
	jQuery('.menu > div').hide();
	jQuery('div.form-' + menuTypeChunks.pop()).show();
}
[JAVASCRIPT] pobierz, plaintext 

W linii 3. użyłem selektora .menu > div - zamień to na selektor, który zadziała u Ciebie w kodzie. Zamiast wybierać wszystkie divy do schowania, odnieś się do nich np. jako "wszystkie divy będące dziećmi XXX".

[Crozin]

@zegarek84: Mamy linię najmniejszego oporu, nie najmniejszą linię oporu.
@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