Opplæring: jQuery Show, Hide and Toggle-funksjoner

Fortsetter jeg med denne serien med å introdusere jQuery-funksjoner og -funksjoner, vil jeg demonstrere å endre utseendet til objekter med skjul / vis-funksjonen og vekselfunksjonen.

Hvis du har gått glipp av de tre første delene av jQuery-serien, må du huske å sjekke dem nedenfor, da de legger grunnlaget for fortsettelsen av trinnene vi vil ta i dette segmentet:

  • Slik bruker du filterfunksjoner i jQuery Dette segmentet vurderer filterfunksjonene (flere valg) med flere eksempler ved bruk av rare og jevnlige velgere, og deretter endrer en innholdsinnholdstekst med .text () -funksjonen.
  • jQuery: Hvordan få objekter etter ID, klasse, tag og attributt Dette segmentet gjennomgår jQuery Få objekt etter jQuery ID Selector ('#id'), Få objekt etter klasse ('. klasse'), Få objekter etter tagg, og Få objekter etter attributt .attr (attributtnavn).
  • Slik kommer du i gang med jQuery Angir grunnleggende HTML og CSS-kode og demonstrerer hendelsesfunksjonen "klar ()", og legger til et klikkhendelsesvarsel til en hyperkobling.

Denne nedlastingen som er koblet her inneholder filene du trenger å følge; den inneholder HTML, jQuery-skriptet, bilder og CSS.

Holder oppe!

jQuery lar deg skjule spesifiserte seksjoner eller innhold ved å bruke .hide () -funksjonen, som skjuler de matchede elementene når de blir kalt. Skjulfunksjonen har to andre versjoner som gir mulighet for varighet, tilbakeringing og lettelse. alle tre versjonene er listet opp nedenfor:

  • . skjul () den grunnleggende skjulfunksjonen
  • . skjul (varighet , tilbakeringing) der varigheten er en streng eller nummer som bestemmer hvor lenge animasjonen skal kjøres, og tilbakeringing er en funksjon å ringe når animasjonen er fullført.
  • . skjul (varighet , lettelse , tilbakeringing) der tillegg til "lettelse" er en streng som indikerer hvilken lettelsesfunksjon som skal brukes til overgangen.

Uten parametere er .hide () -metoden den enkleste måten å skjule et element på og uttrykkes som:

 $ ( 'Target'.) Skjule (.); 

I de demonstrerte eksemplene vil vi fortsette å bruke index.html-filen fra vår webkatalog (se nedlasting); for skjul- funksjonen, vil vi opprette en jQuery-setning for å slå de to elementene med class = "test".

La oss først legge inn innsendingsknappen til linjene 27 til 29 innen den første:

Skjul ethvert element med klasse er lik "test".

Neste, i seksjonen vil vi legge til denne jQuery-koden i dokumentklare funksjonsområde:

 $ ('# skjul'). klikk (funksjon () { 
 $ ( "Test") skjule (.); 
 }); 

Åpne index.html-filen fra nettkatalogen, og klikk deretter på knappen Skjul hvor class = 'test', og du vil legge merke til den andre og tredje boksen vil være skjult, som vist i skjermbildene fra Chrome 18.0.1 nedenfor:

Figur A

La oss nå legge til lettingsfunksjonen "sakte" til skjultovergangen vår med følgende eksempel:

 $ ( "Test") skjul ( 'sakte.'); 

La oss nå oppdatere index.html-dokumentet og klikke på skjul-knappen igjen. Legg merke til overgangen til å skjule elementene. Varigheter er gitt i millisekunder; høyere verdier indikerer tregere animasjoner, ikke raskere. Strengene 'rask' og 'sakte' kan leveres for å indikere varigheter på henholdsvis 200 og 600 millisekunder. Så la oss si at vi lager varigheten "600". Oppdater det og oppdater siden igjen, uansett er effekten den samme.

Så nå vil du kanskje se innholdet igjen, og vi kan legge til en .show () -funksjon:

 $ ( "Test") viser (.); 

Men vi kan også bruke toggle .toggle () -funksjonen til samme formål, som erstatter skjul / vis-funksjonene.

La oss legge til denne knappekoden som begynner med linje 31 i indeksen.html:

Bytt ethvert element med klassen lik "test".

Deretter legger du til .toggle () -funksjonen i jQuery-dokumentet-klar-funksjonen

 $ ('# toggle'). klikk (funksjon () { 
 $ ( "Test") toggle ().; 
 }); 

Oppdater index.html dokumentfilen i nettleseren din, og klikk deretter på den nye knappen Veksle der class = 'test'. Du vil se de to boksene gjemme og vise med hvert klikk. Magien bak vekselfunksjonen er at hvis et objekt for øyeblikket vises på siden, ved knappeklikk, vil objektet forsvinne, og hvis objektet allerede er skjult, når det først er klikket, vil det vises.

I neste avdrag i jQuery-serien vil vi gjennomgå å lage en utvidbar FAQ ved hjelp av noen av teknikkene vi har lært i dette segmentet.

© Copyright 2020 | mobilegn.com