JQuery - att hantera klasser: Skillnad mellan sidversioner

Från Webbling
Hoppa till: navigering, sök
 
Rad 14: Rad 14:


Här följer ett exempel där vi "byter" vilken klass som ligger på några element.
Här följer ett exempel där vi "byter" vilken klass som ligger på några element.
<codepen pen="BjRgNm" tab="js" height="300">
<codepen pen="BjRgNm" tab="js,result" height="300">
</codepen>
</codepen>



Nuvarande version från 12 januari 2019 kl. 21.04

Vi har nu sett hur man kan ändra individuella CSS-egenskaper på element med hjälp av jQuery. Dock så är det oftast bättre att försöka hålla utseende relaterade saker i stylesheets. Det vore alltså bra om vi kunde manipulera vilka klasser som är satta på ett element. Självklart har jQuery bra stöd även för detta. Vilket vi ska titta på i denna aktivitet. (Klasser kan förstås användas till annat än till att styra utseendet. Det kan ju styra hur script hanterar element, osv.)

addClass

Om vi vill lägga till en klass till ett, eller flera element, kan du göra det med metoden addClass. Som hörs på namnet så lägger denna metod till klasser, den tar alltså inte bort eller förändrar dem som redan finns där. Precis som när vi lägger till klasser med HTML-attribut, så kan vi skicka med en lista som innehåller flera klasser. Varje klass ska då åtskiljas av ett mellanslag.

Ett kort exempel:

See the Pen jWmjOK by Patrik Grip-Jansson (@PGJ) on CodePen.

I exemplet lägger vi till klassen a på alla p-element i dokumentet. Lägg märke till att vi anger klassen utan någon inledande punkt. I det här fallet är det ju det rena klassnamnet vi använder, snarare än en selektor.

removeClass

I många fall vill vi förstås även kunna ta bort en klass. Det kan antingen vara att vi inte länge vill ha med den på elementet, men det kan även vara att vi vill ta bort den för att ersätta den med en annan. För detta använder vi oss av metoden removeClass. Även här kan vi ange att vi vill ta bort flera klasser. Återigen görs detta genom att skicka med en sträng som innehåller alla klasser som ska tas bort. Varje klass åtskiljs av ett mellanslag.

Här följer ett exempel där vi "byter" vilken klass som ligger på några element.

See the Pen BjRgNm by Patrik Grip-Jansson (@PGJ) on CodePen.

I exemplet har alla våra p-element klassen a ifrån början. I JavaScript-koden väljer vi ut alla p-element, tar bort klassen a och lägger dit klassen b. Här är använder vi oss förstås av metodlänkning, då bägge metoderna ska köras på samma samling element.

Att ta bort alla klasser

Om vi inte skickar med någon inparameter till removeClass så kommer alla klasser som finns på elementen att tas bort. Detta kan vara bra om vi vill nollställa allt som har med elementet att göra.

hasClass

Ibland vill man veta om ett element har en klass eller ej. Då kan man använda sig av hasClass. Denna returnerar true eller false beroende på om klassen finns eller ej. Det spelar ingen roll om elementen ifråga även har andra klasser satta, det enda som kollas är om den angivna klassen ingår bland de klasser som finns på elementet.

Om metoden utförs på en samling av element, kommer metoden att returnera true om klassen finns på något som helst av elementen i samlingen.

Nästa aktivitet

Nu har vi gått igenom den viktigaste grundfunktionaliteten i jQuery. I följande sektioner kommer vi att gå igenom mer avancerade delar av jQuery.

jQuery - att koppla sig till händelser