Lepszy, bardziej czytelny kod jQuery

0

Witam. Naskrobałem sobie taki kod z użyciem jQuery (głównie dzięki google) i teraz chciałbym się do was zwrócić z pytaniem - jak uczynić go bardziej czytelnym? Zapewne da się go takim zrobić i nie wstawiać tych samych fragmentów kodu więcej niż raz, aczkolwiek nie mam pojęcia jak. Jakaś pomoc, może chociaż nakierowania? :)

$(document).ready(function(){
    if($.cookie('aside')){
        $('aside').hide();
        $('#toggle-aside i').toggleClass('fa-arrow-right fa-arrow-left');
        $("#forum-box").css({width: "100%"});
        $.cookie('aside', '0', { expires: 365, path: '/' });
    };
    
    $("#toggle-aside").click(function(){
      if ( $('aside').is(':hidden') ) {
        $('aside').fadeIn(250);
        $('#toggle-aside i').toggleClass('fa-arrow-left fa-arrow-right');
        $("#forum-box").css({width: "75%"});
        $.removeCookie('aside', { path: '/' });
      } else {
        $('aside').hide();
        $('#toggle-aside i').toggleClass('fa-arrow-right fa-arrow-left');
        $("#forum-box").css({width: "100%"});
        $.cookie('aside', '0', { expires: 365, path: '/' });
      }
    });
});
1

Selektory jQuery przypisz do zmiennych, identyczne bloki wpakuj w funkcję.

0

Ok, dzięki wielkie! :)

Dodałem funkcję i mój kod wygląda teraz następująco:

function asideHidden(){
    $('aside').hide();
    $('#toggle-aside i').toggleClass('fa-arrow-right fa-arrow-left');
    $("#forum-box").css({width: "100%"});
    $.cookie('aside', '0', { expires: 365, path: '/' });
}

function asideVisible(){
    $('aside').fadeIn(250);
    $('#toggle-aside i').toggleClass('fa-arrow-left fa-arrow-right');
    $("#forum-box").css({width: "75%"});
    $.removeCookie('aside', { path: '/' });
}

$(document).ready(function(){
    if($.cookie('aside')){
        asideHidden();
    };
    
    $("#toggle-aside").click(function(){
      if ( $('aside').is(':hidden') ) {
        asideVisible();
      } else {
        asideHidden();
      }
    });
});

Próbowałem używać zmiennych w ten sposób:

var sidebox = $('aside');

function asideHidden(){
    sidebox.hide();
    $('#toggle-aside i').toggleClass('fa-arrow-right fa-arrow-left');
    $("#forum-box").css({width: "100%"});
    $.cookie('aside', '0', { expires: 365, path: '/' });
}

aczkolwiek niestety nie działało. Najwidoczniej robiłem coś źle, ale nie mam pojęcia co.

1 użytkowników online, w tym zalogowanych: 0, gości: 1