1 00:00:03,530 --> 00:00:06,090 Nell'esercizio precedente, 2 00:00:06,090 --> 00:00:08,370 abbiamo visto come possiamo sfruttare 3 00:00:08,370 --> 00:00:11,820 i controlli basati su JavaScript forniti per 4 00:00:11,820 --> 00:00:14,820 i componenti JavaScript Bootstrap 5 00:00:14,820 --> 00:00:18,240 al fine di controllare il comportamento dei componenti. 6 00:00:18,240 --> 00:00:23,370 In particolare, abbiamo visto l'uso della giostra e 7 00:00:23,370 --> 00:00:25,140 come siamo stati in grado di introdurre 8 00:00:25,140 --> 00:00:26,880 due pulsanti per controllare 9 00:00:26,880 --> 00:00:29,190 il comportamento ciclistico della giostra. 10 00:00:29,190 --> 00:00:33,645 Ora, non sono pienamente soddisfatto di questa implementazione. 11 00:00:33,645 --> 00:00:36,510 Vorrei ora comprimere il tutto 12 00:00:36,510 --> 00:00:39,270 in un unico pulsante che può sia 13 00:00:39,270 --> 00:00:42,690 indicare il comportamento corrente 14 00:00:42,690 --> 00:00:46,625 della giostra e anche essere in grado di controllare la giostra. 15 00:00:46,625 --> 00:00:50,225 Quindi vediamo come possiamo sfruttare 16 00:00:50,225 --> 00:00:53,180 ulteriormente il codice jQuery 17 00:00:53,180 --> 00:00:56,800 per raggiungere questo obiettivo, in questo esercizio. 18 00:00:56,800 --> 00:01:00,575 Per raggiungere questo obiettivo, torneremo al codice 19 00:01:00,575 --> 00:01:03,995 in index.html dove abbiamo definito i due pulsanti. 20 00:01:03,995 --> 00:01:08,960 Ora rimuoverò questo div per 21 00:01:08,960 --> 00:01:11,135 il gruppo di pulsanti perché avremo 22 00:01:11,135 --> 00:01:14,510 un solo pulsante invece di due pulsanti. 23 00:01:14,510 --> 00:01:18,620 Quindi ho rimosso il div attorno ai due pulsanti. 24 00:01:18,620 --> 00:01:20,660 Cancellerò anche uno dei pulsanti, 25 00:01:20,660 --> 00:01:22,415 perché lavoreremo con 26 00:01:22,415 --> 00:01:25,640 un solo pulsante per questo esercizio. 27 00:01:25,640 --> 00:01:28,640 Quindi lasciami cambiare il rientro. 28 00:01:28,640 --> 00:01:32,450 Quindi ora, questo particolare pulsante che abbiamo lì, 29 00:01:32,450 --> 00:01:36,090 ho intenzione di rinominare questo pulsante come CarouselButton. 30 00:01:37,120 --> 00:01:40,580 Inizieremo con questo pulsante che è 31 00:01:40,580 --> 00:01:43,940 un pulsante con l'icona di pausa. 32 00:01:43,940 --> 00:01:46,280 Stiamo andando a capovolgere l'icona per 33 00:01:46,280 --> 00:01:49,235 questo pulsante attraverso il codice JavaScript. 34 00:01:49,235 --> 00:01:50,750 Allora, come facciamo? 35 00:01:50,750 --> 00:01:53,480 Dando un'occhiata alla nostra pagina web, 36 00:01:53,480 --> 00:01:56,855 vedremo ora che abbiamo un singolo pulsante qui, 37 00:01:56,855 --> 00:02:00,830 che sta attualmente indicando la pausa lì. 38 00:02:00,830 --> 00:02:05,530 Ora, la mia speranza alla fine di questo esercizio 39 00:02:05,530 --> 00:02:07,580 è di trasformare questo pulsante in 40 00:02:07,580 --> 00:02:10,730 un unico controllo per cui se clicco su questo pulsante, 41 00:02:10,730 --> 00:02:15,210 metterà in pausa il comportamento ciclico del carosello, 42 00:02:15,210 --> 00:02:17,120 e poi contemporaneamente trasformerà 43 00:02:17,120 --> 00:02:19,790 questo pulsante in un pulsante di riproduzione, il 44 00:02:19,790 --> 00:02:21,590 che significa che questa icona 45 00:02:21,590 --> 00:02:23,705 verrà sostituita con l'icona di riproduzione. In 46 00:02:23,705 --> 00:02:27,170 modo che questo singolo pulsante indichi quale sia 47 00:02:27,170 --> 00:02:29,090 lo stato attuale 48 00:02:29,090 --> 00:02:33,400 del comportamento ciclico del mio carosello. Come facciamo a farlo? 49 00:02:33,400 --> 00:02:34,940 Dobbiamo andare a modificare 50 00:02:34,940 --> 00:02:38,010 il codice JavaScript per raggiungere questo obiettivo. 51 00:02:38,010 --> 00:02:41,240 Scendendo 52 00:02:41,240 --> 00:02:43,910 al codice JavaScript nella parte inferiore della pagina index.html. 53 00:02:43,910 --> 00:02:47,450 Quindi qui, abbiamo avuto questo script che avevamo 54 00:02:47,450 --> 00:02:49,580 incluso in precedenza 55 00:02:49,580 --> 00:02:52,325 per attivare i due pulsanti lì. 56 00:02:52,325 --> 00:02:54,980 Ho intenzione di modificare questo codice 57 00:02:54,980 --> 00:02:58,685 per fare uso di quel singolo pulsante che abbiamo lì. 58 00:02:58,685 --> 00:03:00,860 Quindi venendo qui, 59 00:03:00,860 --> 00:03:01,910 rimuoverò 60 00:03:01,910 --> 00:03:03,950 questa seconda parte perché 61 00:03:03,950 --> 00:03:06,190 ora abbiamo un solo pulsante qui, 62 00:03:06,190 --> 00:03:08,575 che è il CarouselButton, 63 00:03:08,575 --> 00:03:10,630 e ogni volta che viene cliccato, 64 00:03:10,630 --> 00:03:14,555 devi fare qualcosa in risposta a farlo. 65 00:03:14,555 --> 00:03:16,400 Quindi, se si 66 00:03:16,400 --> 00:03:18,640 fa clic sul pulsante della giostra, cosa si fa? 67 00:03:18,640 --> 00:03:22,370 Ora, fortunatamente, a seconda 68 00:03:22,370 --> 00:03:26,630 che il pulsante sia un pulsante Riproduci o un pulsante Pausa, 69 00:03:26,630 --> 00:03:29,170 saremo in grado di intraprendere un'azione appropriata. 70 00:03:29,170 --> 00:03:30,620 Ma come facciamo a sapere se si 71 00:03:30,620 --> 00:03:32,300 tratta di un pulsante Play o di un pulsante Pausa? 72 00:03:32,300 --> 00:03:35,960 Quindi questo è dove faremo uso di 73 00:03:35,960 --> 00:03:39,005 un codice jQuery per 74 00:03:39,005 --> 00:03:42,890 identificare se si tratta di un pulsante di riproduzione o di un pulsante di pausa. 75 00:03:42,890 --> 00:03:45,230 Per aiutarci a identificare questo, 76 00:03:45,230 --> 00:03:50,750 andremo dentro qui e poi useremo un'istruzione if, 77 00:03:50,750 --> 00:03:53,255 e dentro lì, ho intenzione di testare per 78 00:03:53,255 --> 00:03:56,585 vedere se si tratta di un gioco o di un pulsante di pausa. 79 00:03:56,585 --> 00:03:59,010 Quindi qui dico, 80 00:04:00,550 --> 00:04:08,955 carosellButton.I bambini spaziano. 81 00:04:08,955 --> 00:04:10,530 Quindi il che significa che, 82 00:04:10,530 --> 00:04:12,115 per questo pulsante carosello, 83 00:04:12,115 --> 00:04:19,380 all'interno dove se c'è un elemento con il tag span, 84 00:04:19,380 --> 00:04:22,790 quindi sappiamo ovviamente che nel nostro pulsante carosello, 85 00:04:22,790 --> 00:04:24,620 avevamo il tag span che 86 00:04:24,620 --> 00:04:28,910 conteneva l'icona Font Awesome lì. 87 00:04:28,910 --> 00:04:31,025 Quindi, per quel tag span, 88 00:04:31,025 --> 00:04:34,440 stiamo andando a controllare HasClass. 89 00:04:36,020 --> 00:04:39,540 Quindi stiamo andando a controllare questo HasClass, 90 00:04:39,540 --> 00:04:42,020 e poi la classe che stiamo andando a 91 00:04:42,020 --> 00:04:46,440 controllare è fa-pausa. 92 00:04:46,910 --> 00:04:49,170 Quindi il che significa che, 93 00:04:49,170 --> 00:04:53,445 se il tag span ha la classe fa-pausa, 94 00:04:53,445 --> 00:04:55,760 allora sappiamo che questo pulsante sta 95 00:04:55,760 --> 00:04:58,085 attualmente agendo come il pulsante pausa. 96 00:04:58,085 --> 00:05:00,770 Quindi, ovviamente, quando si fa clic sul pulsante, 97 00:05:00,770 --> 00:05:03,135 l'utente si aspetta che 98 00:05:03,135 --> 00:05:07,195 il comportamento ciclico debba essere messo in pausa. 99 00:05:07,195 --> 00:05:09,200 Ecco cosa identifichiamo qui. 100 00:05:09,200 --> 00:05:11,480 Quindi ora vedi che stiamo scrivendo 101 00:05:11,480 --> 00:05:15,260 un codice JavaScript più avanzato usando 102 00:05:15,260 --> 00:05:19,775 la sintassi jQuery per farlo funzionare correttamente. 103 00:05:19,775 --> 00:05:23,615 Allora, qui dentro, cosa devo fare? 104 00:05:23,615 --> 00:05:27,105 Ora, il che significa che se il pulsante 105 00:05:27,105 --> 00:05:31,605 è attualmente un pulsante Pausa, 106 00:05:31,605 --> 00:05:34,615 allora, ovviamente quando si fa clic sul pulsante, 107 00:05:34,615 --> 00:05:37,250 si desidera mettere in pausa la giostra. 108 00:05:37,250 --> 00:05:41,825 Quindi, in aggiunta, vogliamo ora essere in grado di capovolgere 109 00:05:41,825 --> 00:05:48,680 quell'icona da un'icona di pausa a un'icona di riproduzione. 110 00:05:48,680 --> 00:05:50,750 Quindi quello che faremo è, 111 00:05:50,750 --> 00:05:53,540 diremo proprio lì dopo questo, 112 00:05:53,540 --> 00:06:11,175 diremo $caroselButton.Bambini span, 113 00:06:11,175 --> 00:06:15,330 e poi diremo, removeClass. 114 00:06:15,330 --> 00:06:23,915 Quindi stiamo andando a rimuovere la classe pausa. 115 00:06:23,915 --> 00:06:25,990 Quindi notate come funziona. 116 00:06:25,990 --> 00:06:29,185 Stiamo andando a rimuovere la classe pausa da quello, 117 00:06:29,185 --> 00:06:33,990 e poi, abbiamo intenzione di aggiungere la PlayClass. 118 00:06:33,990 --> 00:06:38,170 In questo modo l'icona del tuo pulsante 119 00:06:38,170 --> 00:06:42,370 verrà ora capovolta da un pulsante Pausa a un pulsante Riproduci. 120 00:06:42,370 --> 00:06:45,250 Quindi stiamo andando a rimuovere il PauseClass. 121 00:06:45,250 --> 00:06:48,340 Ho intenzione di copiare questo codice e 122 00:06:48,340 --> 00:06:49,960 poi incollarlo proprio 123 00:06:49,960 --> 00:06:52,300 lì e poi fare la modifica a questo codice. 124 00:06:52,300 --> 00:06:55,930 Stessa cosa, per il CarouselButton per i bambini, 125 00:06:55,930 --> 00:06:58,855 sto andando invece di RemoveClass, 126 00:06:58,855 --> 00:07:03,355 direi addClass, e poi fa-play. 127 00:07:03,355 --> 00:07:05,800 In questo modo, quello che stiamo facendo è, 128 00:07:05,800 --> 00:07:07,765 stiamo capovolgendo quel pulsante da 129 00:07:07,765 --> 00:07:10,695 un pulsante Pausa a un pulsante Play. 130 00:07:10,695 --> 00:07:16,310 Inoltre, stiamo mettendo in pausa 131 00:07:16,310 --> 00:07:19,355 il comportamento ciclistico della giostra. 132 00:07:19,355 --> 00:07:22,795 Ora, se questo non è il caso allora, 133 00:07:22,795 --> 00:07:24,870 dovrebbe essere un pulsante Play in modo che 134 00:07:24,870 --> 00:07:30,060 l'effetto opposto dovrebbe essere introdotto. 135 00:07:30,060 --> 00:07:33,815 Quindi, ho intenzione di copiare semplicemente questo codice 136 00:07:33,815 --> 00:07:38,900 e quindi fare gli altri test per la situazione 137 00:07:38,900 --> 00:07:44,105 in cui il pulsante è un PlayButton. 138 00:07:44,105 --> 00:07:49,020 Quindi direi altro, ora ovviamente, 139 00:07:49,020 --> 00:07:54,750 non ho bisogno di questo se qui, ma solo per essere doppiamente sicuro, 140 00:07:54,750 --> 00:07:57,220 ho intenzione di metterlo lì dentro. 141 00:07:58,060 --> 00:08:00,830 Perché ci sono solo due possibilità, 142 00:08:00,830 --> 00:08:02,750 o è un pulsante Pausa o un pulsante Play, 143 00:08:02,750 --> 00:08:06,530 ma solo per la mia rassicurazione, 144 00:08:06,530 --> 00:08:10,010 ho intenzione di metterlo come un fa-play lì. 145 00:08:10,010 --> 00:08:12,950 Ora dentro, ho intenzione di cambiare 146 00:08:12,950 --> 00:08:16,530 questo da pausa a ciclo. 147 00:08:16,530 --> 00:08:18,230 Poiché dall'esercizio precedente, 148 00:08:18,230 --> 00:08:19,700 si ricorda che se si desidera che 149 00:08:19,700 --> 00:08:21,575 il comportamento di ciclismo riprenda, 150 00:08:21,575 --> 00:08:29,205 è necessario impostare l'azione carosello in modo che sia ciclo. 151 00:08:29,205 --> 00:08:33,840 Quindi allo stesso modo, per le restanti due affermazioni, 152 00:08:33,840 --> 00:08:37,875 rimuoverò la PlayClass 153 00:08:37,875 --> 00:08:42,715 e quindi aggiungerò la PauseClass. 154 00:08:42,715 --> 00:08:48,095 Quindi nota come stiamo usando un po 'di 155 00:08:48,095 --> 00:08:52,310 codice jQuery avanzato per essere 156 00:08:52,310 --> 00:08:56,854 in grado di cambiare dinamicamente l'icona dei pulsanti 157 00:08:56,854 --> 00:08:58,460 e, allo stesso tempo, 158 00:08:58,460 --> 00:09:03,140 indurre il comportamento ciclistico appropriato sul nostro carosello. 159 00:09:03,140 --> 00:09:05,760 Dai un'occhiata alla nostra pagina web, 160 00:09:05,760 --> 00:09:09,390 ora vedi che il mio carosello sta pedalando, 161 00:09:09,390 --> 00:09:14,465 e vedi che questo pulsante è attualmente un pulsante Pausa. 162 00:09:14,465 --> 00:09:16,130 Quando clicco su questo pulsante, 163 00:09:16,130 --> 00:09:21,855 nota come cambia da Pausa a un pulsante Riproduci lì, 164 00:09:21,855 --> 00:09:23,865 e poi contemporaneamente, il 165 00:09:23,865 --> 00:09:27,325 mio comportamento di ciclismo della giostra è in pausa. 166 00:09:27,325 --> 00:09:28,840 Quindi, a questo punto, 167 00:09:28,840 --> 00:09:31,460 il mio carosello rimarrà in pausa in 168 00:09:31,460 --> 00:09:34,700 quella posizione finché non faccio clic sul pulsante. 169 00:09:34,700 --> 00:09:36,950 Quindi ora, se faccio di nuovo clic su questo pulsante, 170 00:09:36,950 --> 00:09:40,130 nota la modifica dal pulsante Riproduci a un pulsante Pausa, 171 00:09:40,130 --> 00:09:42,320 e quindi 172 00:09:42,320 --> 00:09:44,795 il comportamento in bicicletta della giostra riprenderà sul posto. 173 00:09:44,795 --> 00:09:46,625 Quindi usando un solo pulsante ora, 174 00:09:46,625 --> 00:09:50,570 sono in grado di controllare sia 175 00:09:50,570 --> 00:09:54,695 il comportamento della giostra che anche contemporaneamente, 176 00:09:54,695 --> 00:09:57,125 visualizzare lo stato attuale 177 00:09:57,125 --> 00:09:59,460 del comportamento ciclistico del mio carosello. 178 00:09:59,460 --> 00:10:00,740 Se si tratta di un pulsante Pausa, 179 00:10:00,740 --> 00:10:03,050 significa che il mio carosello sta attualmente pedalando. 180 00:10:03,050 --> 00:10:04,535 Se si tratta di un pulsante Riproduci, 181 00:10:04,535 --> 00:10:06,560 il mio carosello è in pausa. 182 00:10:06,560 --> 00:10:08,630 Quindi, per riprenderlo, 183 00:10:08,630 --> 00:10:10,175 dovrò fare clic sul pulsante. 184 00:10:10,175 --> 00:10:14,600 Quindi questo è un altro cambiamento aggiuntivo 185 00:10:14,600 --> 00:10:17,120 che puoi fare all'esercizio. 186 00:10:17,120 --> 00:10:20,480 Così ora, si vede come nel nostro codice abbiamo 187 00:10:20,480 --> 00:10:24,629 fatto uso del metodo hasClass, 188 00:10:24,629 --> 00:10:27,000 e abbiamo anche visto l'uso dei metodi 189 00:10:27,000 --> 00:10:30,990 removeClass e addClass, 190 00:10:30,990 --> 00:10:33,770 metodi jQuery che abbiamo applicato 191 00:10:33,770 --> 00:10:36,845 per manipolare il DOM per 192 00:10:36,845 --> 00:10:39,545 riflettere il comportamento 193 00:10:39,545 --> 00:10:43,445 pertinente in questo caso particolare. 194 00:10:43,445 --> 00:10:47,755 Con questo, completiamo questo esercizio. 195 00:10:47,755 --> 00:10:51,450 È tempo per te di fare un commit Git con 196 00:10:51,450 --> 00:10:56,710 il messaggio più Bootstrap e jQuery.