Witam serdecznie.
Chciałbym zrobić na swojej stronie zmianę rozmiaru czcionki. Tzn. 2 guziczki (powiększ i pomniejsz) po kliknięciu których czcionka w wybranych klasach zostanie powiększona.

Klasy które chciałbym powiększyć to: .tytul, .tresc, .zajawka. Każda klasa ma inny rozmiar.


Aktualnie mam taki kod:

[HTML] pobierz, plaintext 
 
$(document).ready(function ($) {
        if (typeof localStorage.font === 'undefined') {
            localStorage.font = 0;
        }
 
        loadSettings();
 
        $(".fontSizeChanger1").click(function (e) {
            if (localStorage.font < 3) {
                addValues();
            }
        });
 
        $(".fontSizeChanger2").click(function (e) {
            if (localStorage.font > 0) {
                removeValues();
            }
        });
 
        function loadSettings() {
            if (localStorage.font != 0 ) {
                $(".tytul *").css('font-size', '+=' + localStorage.font);
$(".tresc *").css('font-size', '+=' + localStorage.font);
$(".zajawka *").css('font-size', '+=' + localStorage.font);
            }
        }
 
        function removeValues() {
            localStorage.font = parseInt(localStorage.font) - 1;
            loadSettings();
        }
 
        function addValues() { 
            localStorage.font = parseInt(localStorage.font) + 1;
            loadSettings();
        }
    });
 
 
[HTML] pobierz, plaintext 

Rozwiązanie o którym mówię znajduje się np tutaj:

1. gdynia.pl
2. http://bip.zawiercie.powiat.finn.pl


Mógłbym prosić o pomoc z tym kodem?

Aktualnie nie powiększa i pomniejsza Chciałbym zwiększać i pomniejszać czcionki w wybranych klasach o 1px.
Czyli domyślnie mam 0 (oryginalny rozmiar czcionki z CSS) - i po kliknięciu powiększam o 1px - max 3 px.

Bardzo proszę o pomoc

Strona docelowa jest wykonana na Bootstrapie