GoldenLine
Zaloguj się
Marcin Szczepański

Marcin Szczepański Właściciel, Usługi
Informatyczne KOK@LO

Temat: Optymalizacja kodu jQuery

Witam

Można jakoś zoptymalizować kod jQuery w poniższym przykładzie?

http://jsfiddle.net/4bT6H/73/

Chodzi o to, że po dodaniu kolejnych opcji wyboru skrypt się nieźle rozrośnie. Boję się, że np. po roku jak będę miał dokonać jakiejś zmiany to tego nie ogarnę. Nie znam na tyle tego języka jQuery aby uprościć kod nie zmieniając działania skryptu.
Link do wypowiedziLink
Mariusz Przybylski

Mariusz Przybylski Dynamite Studio

Temat: Optymalizacja kodu jQuery



$(function() {

    $types = $('.syncTypes');

    

    opcje = ['opcje1', 'opcje2','opcje3','opcje11','opcje12'];

           

    $types.change(function() {

        $this = $(this).val();

        

        $.each(opcje, function( index, value ) {

            if (value == $this) {

                $('#'+value).delay(200).slideDown(200);

            }

            else {

                $('#'+value).slideUp(200);

            }

        });    



    });

});


zmień tylko value dla pierwszego radio na "opcje1" i będzie działać
Link do wypowiedziLink
Marcin Szczepański

Marcin Szczepański Właściciel, Usługi
Informatyczne KOK@LO

Temat: Optymalizacja kodu jQuery

Jest prawie ok. Ale niestety trzeba jeszcze uwzględnić 1 warunek. Po wybraniu opcji 11 lub 12 nie może zniknąć zawartość wyboru opcji z poprzednich kroków. Zasada działania ma być taka, że idziemy sobie przez skrypt krok po kroku i wybory z poprzednich kroków nie znikają (chyba że zmienimy krok nadrzędny). Kurcze trochę zamieszałem.
Link do wypowiedziLink
Mariusz Przybylski

Mariusz Przybylski Dynamite Studio

Temat: Optymalizacja kodu jQuery



$(function() {

    $types = $('.syncTypes');

    

    opcje = ['opcje1', 'opcje2','opcje3','opcje1_1','opcje1_2'];

           

    $types.change(function() {

        values = new Array();

        $this = $(this).val();

        values.push($this);

        

        if ($this.indexOf("_") > 0) {

            tmp = $this.split("_");

            values.push(tmp[0]);

        }

        

        $.each(opcje, function( index, value ) {

            if ($.inArray(value, values) > -1) {

                $('#'+value).delay(200).slideDown(200);

            }

            else {

                $('#'+value).slideUp(200);

            }

        });    



    });

});


Zauważ, że zmieniłem "opcje11" na "opcje1_1" i podobnie z "opcje12" - takie same zmiany musisz zrobić w kodzie HTML.

Można to zrobić inaczej np. odpowiednio grupując elementy i nadając nazwy ich rodzicom, ale nie chciało mi się już tak dłubać. Gdybyś chciał mieć większą swobodę w ustalaniu value dla radio to zawsze możesz wykorzystać inne atrybuty np. "alt".

Jeśli chcesz obsłużyć więcej zagłębień radio to dajesz np. "opcje1_1_1" itp., ale musisz też wtedy zmienić ten fragment kodu:


if ($this.indexOf("_") > 0) {

    tmp = $this.split("_");

    values.push(tmp[0]);

}

można to zrobić uniwersalnie dla dowolnej liczby zagłębień sprawdzając rozmiar tablicy tmp i robiąc jakąś pętlę uzupełniającą tablicę values, ale też mi się nie chciało tego składać :P
Link do wypowiedziLink
Marcin Szczepański

Marcin Szczepański Właściciel, Usługi
Informatyczne KOK@LO

Temat: Optymalizacja kodu jQuery

Potrzebny mi jeszcze jeden krok. Czyli x_x_x. Ja nie kumam tego jQuery, więc proszę o pomoc lub zamknięcie tematu i polecę pierwszym kodem.

http://jsfiddle.net/4bT6H/78/Ten post został edytowany przez Autora dnia 03.10.13 o godzinie 13:28
Link do wypowiedziLink
Mariusz Przybylski

Mariusz Przybylski Dynamite Studio

Temat: Optymalizacja kodu jQuery



$(function() {

    $types = $('.syncTypes');

    

    opcje = ['opcje1', 'opcje2', 'opcje3', 'opcje1_1', 'opcje1_2', 'opcje2_1', 'opcje2_2', 'opcje3_1', 'opcje3_2' , 'opcje2_1_1', 'opcje2_1_2'];

           

    $types.change(function() {

        values = new Array();

        $this = $(this).val();

        values.push($this);

        

        if ($this.indexOf("_") > 0) {

            tmp = $this.split("_");

            values.push(tmp[0]);

            if (tmp.length == 3) {

                values.push(tmp[0]+'_'+tmp[1]);

            }                

            

        }

                

        $.each(opcje, function( index, value ) {

            if ($.inArray(value, values) > -1) {

                $('#'+value).delay(200).slideDown(200);

            }

            else {

                $('#'+value).slideUp(200);

            }

        });    



    });

});


żeby działało to musisz prawidłowo pogrupować, bo teraz masz w divie o id=2_1 opcje 2_2_1 i 2_2_2 zamiast 2_1_1 i 2_1_2 i tak samo kolejne divy najniższego poziomu - id do zmianyTen post został edytowany przez Autora dnia 03.10.13 o godzinie 16:27
Link do wypowiedziLink
Marcin Szczepański

Marcin Szczepański Właściciel, Usługi
Informatyczne KOK@LO

Temat: Optymalizacja kodu jQuery

O to chodziło. Dzięki

Jeszcze jedno pytanko. Można ten fragment kodu wzbogacić o funkcje, która pamięta wypory "radio" z poprzednich kroków lub podkreśla np tekst z wyporem poprzednich kroków?
Link do wypowiedziLink
Mariusz Przybylski

Mariusz Przybylski Dynamite Studio

Temat: Optymalizacja kodu jQuery

Najłatwiej jak każda grupa radio będzie miała inną nazwę, w tej chwili wszystkie mają name="syncTypes"
Link do wypowiedziLink
« Wróć do tematów
Odpowiedz

Podobne tematy


Następna dyskusja:

Optymalizacja kodu JavaScri...




Wyślij zaproszenie do
Anuluj