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

Czas czytania: 2 minut

Dzisiaj pokażę wam jak z pomocą jQuery dodać 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 z nim wrócić.

Dodawanie i usuwanie klasy

W tym wpisie poruszę tematyką dodania lub /i usuwania klasy z konkretnego elementu np. <div>. 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 dema. 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 elementy <nav>. Robimy dokładnie to co pisze <nav> dodaj klasę fixed-top

W efekcie kod strony przed ingerencją JS będzie wyglądał tak:

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

A po odczytaniu kodu 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 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ę.

DEMO

Usuwanie klasy removeClass

Analogicznie działa tylko w drugą stronę – czyli nie dodajemy klasy a ją usuwamy

$("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