Nell'esercizio precedente,
abbiamo visto come possiamo sfruttare
i controlli basati su JavaScript forniti per
i componenti JavaScript Bootstrap
al fine di controllare il comportamento dei componenti.
In particolare, abbiamo visto l'uso della giostra e
come siamo stati in grado di introdurre
due pulsanti per controllare
il comportamento ciclistico della giostra.
Ora, non sono pienamente soddisfatto di questa implementazione.
Vorrei ora comprimere il tutto
in un unico pulsante che può sia
indicare il comportamento corrente
della giostra e anche essere in grado di controllare la giostra.
Quindi vediamo come possiamo sfruttare
ulteriormente il codice jQuery
per raggiungere questo obiettivo, in questo esercizio.
Per raggiungere questo obiettivo, torneremo al codice
in index.html dove abbiamo definito i due pulsanti.
Ora rimuoverò questo div per
il gruppo di pulsanti perché avremo
un solo pulsante invece di due pulsanti.
Quindi ho rimosso il div attorno ai due pulsanti.
Cancellerò anche uno dei pulsanti,
perché lavoreremo con
un solo pulsante per questo esercizio.
Quindi lasciami cambiare il rientro.
Quindi ora, questo particolare pulsante che abbiamo lì,
ho intenzione di rinominare questo pulsante come CarouselButton.
Inizieremo con questo pulsante che è
un pulsante con l'icona di pausa.
Stiamo andando a capovolgere l'icona per
questo pulsante attraverso il codice JavaScript.
Allora, come facciamo?
Dando un'occhiata alla nostra pagina web,
vedremo ora che abbiamo un singolo pulsante qui,
che sta attualmente indicando la pausa lì.
Ora, la mia speranza alla fine di questo esercizio
è di trasformare questo pulsante in
un unico controllo per cui se clicco su questo pulsante,
metterà in pausa il comportamento ciclico del carosello,
e poi contemporaneamente trasformerà
questo pulsante in un pulsante di riproduzione, il
che significa che questa icona
verrà sostituita con l'icona di riproduzione. In
modo che questo singolo pulsante indichi quale sia
lo stato attuale
del comportamento ciclico del mio carosello. Come facciamo a farlo?
Dobbiamo andare a modificare
il codice JavaScript per raggiungere questo obiettivo.
Scendendo
al codice JavaScript nella parte inferiore della pagina index.html.
Quindi qui, abbiamo avuto questo script che avevamo
incluso in precedenza
per attivare i due pulsanti lì.
Ho intenzione di modificare questo codice
per fare uso di quel singolo pulsante che abbiamo lì.
Quindi venendo qui,
rimuoverò
questa seconda parte perché
ora abbiamo un solo pulsante qui,
che è il CarouselButton,
e ogni volta che viene cliccato,
devi fare qualcosa in risposta a farlo.
Quindi, se si
fa clic sul pulsante della giostra, cosa si fa?
Ora, fortunatamente, a seconda
che il pulsante sia un pulsante Riproduci o un pulsante Pausa,
saremo in grado di intraprendere un'azione appropriata.
Ma come facciamo a sapere se si
tratta di un pulsante Play o di un pulsante Pausa?
Quindi questo è dove faremo uso di
un codice jQuery per
identificare se si tratta di un pulsante di riproduzione o di un pulsante di pausa.
Per aiutarci a identificare questo,
andremo dentro qui e poi useremo un'istruzione if,
e dentro lì, ho intenzione di testare per
vedere se si tratta di un gioco o di un pulsante di pausa.
Quindi qui dico,
carosellButton.I bambini spaziano.
Quindi il che significa che,
per questo pulsante carosello,
all'interno dove se c'è un elemento con il tag span,
quindi sappiamo ovviamente che nel nostro pulsante carosello,
avevamo il tag span che
conteneva l'icona Font Awesome lì.
Quindi, per quel tag span,
stiamo andando a controllare HasClass.
Quindi stiamo andando a controllare questo HasClass,
e poi la classe che stiamo andando a
controllare è fa-pausa.
Quindi il che significa che,
se il tag span ha la classe fa-pausa,
allora sappiamo che questo pulsante sta
attualmente agendo come il pulsante pausa.
Quindi, ovviamente, quando si fa clic sul pulsante,
l'utente si aspetta che
il comportamento ciclico debba essere messo in pausa.
Ecco cosa identifichiamo qui.
Quindi ora vedi che stiamo scrivendo
un codice JavaScript più avanzato usando
la sintassi jQuery per farlo funzionare correttamente.
Allora, qui dentro, cosa devo fare?
Ora, il che significa che se il pulsante
è attualmente un pulsante Pausa,
allora, ovviamente quando si fa clic sul pulsante,
si desidera mettere in pausa la giostra.
Quindi, in aggiunta, vogliamo ora essere in grado di capovolgere
quell'icona da un'icona di pausa a un'icona di riproduzione.
Quindi quello che faremo è,
diremo proprio lì dopo questo,
diremo $caroselButton.Bambini span,
e poi diremo, removeClass.
Quindi stiamo andando a rimuovere la classe pausa.
Quindi notate come funziona.
Stiamo andando a rimuovere la classe pausa da quello,
e poi, abbiamo intenzione di aggiungere la PlayClass.
In questo modo l'icona del tuo pulsante
verrà ora capovolta da un pulsante Pausa a un pulsante Riproduci.
Quindi stiamo andando a rimuovere il PauseClass.
Ho intenzione di copiare questo codice e
poi incollarlo proprio
lì e poi fare la modifica a questo codice.
Stessa cosa, per il CarouselButton per i bambini,
sto andando invece di RemoveClass,
direi addClass, e poi fa-play.
In questo modo, quello che stiamo facendo è,
stiamo capovolgendo quel pulsante da
un pulsante Pausa a un pulsante Play.
Inoltre, stiamo mettendo in pausa
il comportamento ciclistico della giostra.
Ora, se questo non è il caso allora,
dovrebbe essere un pulsante Play in modo che
l'effetto opposto dovrebbe essere introdotto.
Quindi, ho intenzione di copiare semplicemente questo codice
e quindi fare gli altri test per la situazione
in cui il pulsante è un PlayButton.
Quindi direi altro, ora ovviamente,
non ho bisogno di questo se qui, ma solo per essere doppiamente sicuro,
ho intenzione di metterlo lì dentro.
Perché ci sono solo due possibilità,
o è un pulsante Pausa o un pulsante Play,
ma solo per la mia rassicurazione,
ho intenzione di metterlo come un fa-play lì.
Ora dentro, ho intenzione di cambiare
questo da pausa a ciclo.
Poiché dall'esercizio precedente,
si ricorda che se si desidera che
il comportamento di ciclismo riprenda,
è necessario impostare l'azione carosello in modo che sia ciclo.
Quindi allo stesso modo, per le restanti due affermazioni,
rimuoverò la PlayClass
e quindi aggiungerò la PauseClass.
Quindi nota come stiamo usando un po 'di
codice jQuery avanzato per essere
in grado di cambiare dinamicamente l'icona dei pulsanti
e, allo stesso tempo,
indurre il comportamento ciclistico appropriato sul nostro carosello.
Dai un'occhiata alla nostra pagina web,
ora vedi che il mio carosello sta pedalando,
e vedi che questo pulsante è attualmente un pulsante Pausa.
Quando clicco su questo pulsante,
nota come cambia da Pausa a un pulsante Riproduci lì,
e poi contemporaneamente, il
mio comportamento di ciclismo della giostra è in pausa.
Quindi, a questo punto,
il mio carosello rimarrà in pausa in
quella posizione finché non faccio clic sul pulsante.
Quindi ora, se faccio di nuovo clic su questo pulsante,
nota la modifica dal pulsante Riproduci a un pulsante Pausa,
e quindi
il comportamento in bicicletta della giostra riprenderà sul posto.
Quindi usando un solo pulsante ora,
sono in grado di controllare sia
il comportamento della giostra che anche contemporaneamente,
visualizzare lo stato attuale
del comportamento ciclistico del mio carosello.
Se si tratta di un pulsante Pausa,
significa che il mio carosello sta attualmente pedalando.
Se si tratta di un pulsante Riproduci,
il mio carosello è in pausa.
Quindi, per riprenderlo,
dovrò fare clic sul pulsante.
Quindi questo è un altro cambiamento aggiuntivo
che puoi fare all'esercizio.
Così ora, si vede come nel nostro codice abbiamo
fatto uso del metodo hasClass,
e abbiamo anche visto l'uso dei metodi
removeClass e addClass,
metodi jQuery che abbiamo applicato
per manipolare il DOM per
riflettere il comportamento
pertinente in questo caso particolare.
Con questo, completiamo questo esercizio.
È tempo per te di fare un commit Git con
il messaggio più Bootstrap e jQuery.