Dodanie klasy do obiektu z pomocą jQuery [JS] – .addClass()

Czas czytania: 3 minut

Z tego artykułu dowiecie się jak z pomocą jQuery dodać dodatkową klasę do obiektu HTML. Po części ten temat przemykał już kilkakrotnie, ale dla części z was mógł wydać się niezrozumiały. Dlatego postanowiłam go nieco rozwinąć.

Dodawanie i usuwanie klasy

Umiejętność dodania lub /i usuwania klasy do konkretnego elementu HTML takiego jak np. <div>, <span>; jest bardzo przydatna i otwiera przed nami nowe możliwości. Chociaż jeśli jesteś początkujący możesz sobie z tego jeszcze nie zdawać sprawy. Za pomocą klas można bowiem “zarządzać obiektami” nie tylko w CSS, ale również w JS (jQuery czy innych innych bibliotekach). Klasa bądź ID może być trigerem (prowokatorem) do wykonania jakieś operacji np. menu przyczepione do góry strony. Warto wiedzieć więc jak to zrobić.

W przyszłości planuję również trochę rozwinąć temat o:

• umieszczanie kodu CSS bezpośrednio w obiekcie,
• dodać nowy element z pomocą jQuery,
• wywołanie komunikatu w formie wyskakującego okna.

Do poniższych zmiennych postaram się przygotować proste demo. Dzięki czemu będziecie mogli przetestować jak działają.

Dodawanie nowej klasy w jQuery – addClass

Funkcji tej używałam już wielokrotnie na blogu. Ostatnio przy budowaniu prostego akordeonu. W zależności do jakiego obiektu chcemy dodać dodatkową klasę nasz kod będzie wyglądał inaczej np.

 $('nav').addClass('fixed-top');

W tym przypadku dodajemy klasę “fixes-top” do elementu/ów <nav>. Robimy więc dokładnie to co pisze <nav> dodaj klasę fixed-top

W efekcie kod strony przed wczytanie JS (pierwotnie) będzie wyglądał tak:

 <nav class="navbar navbar-expand-md navbar-light ">

A po odczytaniu kodu i jego interpretację przez przeglądarkę:

 <nav class="navbar navbar-expand-md navbar-light fixed-top">

UWAGA: Kod JS jest interpretowany przez przeglądarkę. To ona na bieżąco wprowadza zmiany i wykonuje polecenia zapisane w JS. Analogicznie jest z CSS i HTML. Kod pisany w PHP interpretowany jest przez serwer. Przeglądarka otrzymuje już gotowy skrypt zamienimy na HTML, który można modyfikować w CSS.

Dodanie klasy po naciśnięciu przycisku

Teraz dodamy klasę dopiero po wykonaniu określonej czynności w tym wypadku będzie to kliknięcie w przycisk. Nasz kod jQuery, który nam to umożliwi będzie więc mniej więcej wyglądał tak:

$("button").click(function(){
 $("h1, h2, p").addClass("green");
 $("div").addClass("red");
});

Jak widać kod zaczyna się od polecenia:

$("button").click(function(){});

Rozłóżmy go na części pierwsze.

• $(“button”) – odnosi się do jakiegoś dowolnego przycisku. Gdybym zmodyfikowała ten kod do $(“button.niebieski”)  oznaczało by to, że interesuje nas przycisk posiadający klasę “niebieski”.
• .click – zadaniem tej zmiennej jest wykrycie kliknięcia na obiekt
• function() – oznaczenie, że będziemy tworzyć funkcję

Dosłownie tłumacząc -> Po kliknięciu w przycisk wykonaj funkcję / operację. Do elementów “h1”, “h2”, i “p” zostanie dodana klasa “green” a do znacznika “div” – “red”. Teraz to co się stanie zależy od tego co jest napisane w CSS. W przypadku mojego demo nastąpi zmiana koloru tekstu.

DEMO

Usuwanie klasy removeClass

Analogicznie jak dodawaliśmy tak i możemy usuwać klasę. Bo przykładowo nie jest ona nam już potrzebna na danym elemencie.

$("button").click(function(){
 $("h1, h2, p").removeClass("green");
 $("div").removeClass("red");
});

Dodawanie i usuwanie z addClass i removeClass

Teraz zrobię coś trochę innego i dla odmiany będę pracować nad listą. W związku z tym zależeć mi będzie na dodawaniu i usuwaniu klasy po kliknięciu w dany obiekt. Coś podobnego wykonałam już przy okazji budowy tabów.

$("#myMenu li a").click(function(){
   $('li a.active').removeClass('active');
    $(this).addClass('active');
});

I tak w moim kodzie muszę zmienić pierwszą linijkę. Nie będę przecież klikać w przycisk tylko w element listy. Ścieżka jest analogiczna do tej w CSS.

W środku funkcji też wprowadzam pewne zmiany. Na początek tworzę komendę, która odnajdzie element listy posiadający klasę, którą chce dodawać i osuwać – klasę “active“. Następnie usuwam ją. W ten sposób pozbywam się wszystkich potencjalnych elementów listy z tą klasą.

Teraz czas dodać klasę tylko i wyłącznie do elementu, w który klikam. $(this) -> w ten sposób odnoszę się do tego elementu.

DEMO

Dodawanie / usuwanie klasy – toggleClass

Ciekawą opcją jest toggleClass. Zmienna ta działa na zasadzie togle (włącz / wyłącz).

$("button").click(function(){
 $("h1, h2, p").toggleClass("green");
 $("div").toggleClass("red");
});

DEMO