1 00:00:03,530 --> 00:00:06,090 In der vorherigen Übung 2 00:00:06,090 --> 00:00:08,370 haben wir gesehen, wie wir 3 00:00:08,370 --> 00:00:11,820 die JavaScript-basierten Steuerelemente nutzen können, die für 4 00:00:11,820 --> 00:00:14,820 die Bootstrap JavaScript-Komponenten bereitgestellt werden, 5 00:00:14,820 --> 00:00:18,240 um das Verhalten der Komponenten zu steuern. 6 00:00:18,240 --> 00:00:23,370 Insbesondere sahen wir die Verwendung des Karussell und 7 00:00:23,370 --> 00:00:25,140 wie wir in der Lage waren, 8 00:00:25,140 --> 00:00:26,880 zwei Tasten einzuführen, um 9 00:00:26,880 --> 00:00:29,190 das Fahrverhalten des Karussell zu steuern. 10 00:00:29,190 --> 00:00:33,645 Jetzt bin ich mit dieser Implementierung nicht vollständig zufrieden. 11 00:00:33,645 --> 00:00:36,510 Ich möchte jetzt das Ganze 12 00:00:36,510 --> 00:00:39,270 in einen einzigen Knopf zusammenbrechen, 13 00:00:39,270 --> 00:00:42,690 der sowohl das aktuelle Verhalten 14 00:00:42,690 --> 00:00:46,625 des Karusells als auch das Karussell steuern kann. 15 00:00:46,625 --> 00:00:50,225 Lassen Sie uns also sehen, wie wir 16 00:00:50,225 --> 00:00:53,180 weiteren jQuery-Code nutzen können, 17 00:00:53,180 --> 00:00:56,800 um dies zu erreichen, in dieser Übung. 18 00:00:56,800 --> 00:01:00,575 Um dies zu erreichen, gehen wir zurück zum Code 19 00:01:00,575 --> 00:01:03,995 in index.html, wo wir die beiden Schaltflächen definiert haben. 20 00:01:03,995 --> 00:01:08,960 Ich werde jetzt dieses div für 21 00:01:08,960 --> 00:01:11,135 die Schaltflächengruppe entfernen, weil wir 22 00:01:11,135 --> 00:01:14,510 nur eine einzige Schaltfläche anstelle von zwei Schaltflächen haben werden. 23 00:01:14,510 --> 00:01:18,620 Also habe ich das div um die beiden Tasten entfernt. 24 00:01:18,620 --> 00:01:20,660 Ich werde auch eine der Schaltflächen löschen, 25 00:01:20,660 --> 00:01:22,415 weil wir 26 00:01:22,415 --> 00:01:25,640 für diese Übung mit nur einer einzigen Schaltfläche arbeiten werden. 27 00:01:25,640 --> 00:01:28,640 Also lassen Sie mich die Einrückung ändern. 28 00:01:28,640 --> 00:01:32,450 Also, jetzt, diese spezielle Schaltfläche, die wir dort haben, 29 00:01:32,450 --> 00:01:36,090 werde ich diesen Button als CarouselButton umbenennen. 30 00:01:37,120 --> 00:01:40,580 Wir beginnen damit, dass dieser Button 31 00:01:40,580 --> 00:01:43,940 eine Schaltfläche mit dem Pause-Symbol ist. 32 00:01:43,940 --> 00:01:46,280 Wir werden das Symbol für 33 00:01:46,280 --> 00:01:49,235 diese Schaltfläche durch JavaScript-Code umdrehen. 34 00:01:49,235 --> 00:01:50,750 Also, wie machen wir das? Wenn wir 35 00:01:50,750 --> 00:01:53,480 einen Blick auf unsere Webseite werfen, 36 00:01:53,480 --> 00:01:56,855 werden wir jetzt sehen, dass wir hier eine einzige Schaltfläche haben, 37 00:01:56,855 --> 00:02:00,830 die derzeit die Pause dort anzeigt. 38 00:02:00,830 --> 00:02:05,530 Nun, meine Hoffnung am Ende dieser Übung 39 00:02:05,530 --> 00:02:07,580 ist, diesen Knopf in 40 00:02:07,580 --> 00:02:10,730 ein einziges Steuerelement zu verwandeln, wobei, wenn ich auf diese Schaltfläche klicke, 41 00:02:10,730 --> 00:02:15,210 es das zyklische Verhalten des Karusells pausiert 42 00:02:15,210 --> 00:02:17,120 und dann gleichzeitig 43 00:02:17,120 --> 00:02:19,790 diesen Knopf in eine Play-Schaltfläche verwandelt, 44 00:02:19,790 --> 00:02:21,590 was bedeutet, dass dieses Symbol 45 00:02:21,590 --> 00:02:23,705 ersetzt wird mit dem Wiedergabesymbol. 46 00:02:23,705 --> 00:02:27,170 Damit dieser einzelne Knopf anzeigt, wie 47 00:02:27,170 --> 00:02:29,090 der aktuelle Zustand 48 00:02:29,090 --> 00:02:33,400 des zyklischen Verhaltens meines Karusells ist. Wie machen wir das? 49 00:02:33,400 --> 00:02:34,940 Wir müssen 50 00:02:34,940 --> 00:02:38,010 den JavaScript-Code bearbeiten, um das zu erreichen. 51 00:02:38,010 --> 00:02:41,240 Gehen Sie zum JavaScript-Code 52 00:02:41,240 --> 00:02:43,910 unten auf der Seite index.html. 53 00:02:43,910 --> 00:02:47,450 Hier hatten wir also dieses Skript, das wir 54 00:02:47,450 --> 00:02:49,580 früher aufgenommen hatten, 55 00:02:49,580 --> 00:02:52,325 um die beiden Buttons dort zu aktivieren. 56 00:02:52,325 --> 00:02:54,980 Ich werde diesen Code bearbeiten, 57 00:02:54,980 --> 00:02:58,685 um diese einzelne Schaltfläche zu verwenden, die wir dort haben. 58 00:02:58,685 --> 00:03:00,860 Also, wenn 59 00:03:00,860 --> 00:03:01,910 ich hier unten komme, werde ich 60 00:03:01,910 --> 00:03:03,950 diesen zweiten Teil entfernen, weil wir 61 00:03:03,950 --> 00:03:06,190 hier nur eine einzige Schaltfläche haben, 62 00:03:06,190 --> 00:03:08,575 die der CarouselButton ist, 63 00:03:08,575 --> 00:03:10,630 und wann immer darauf geklickt wird, 64 00:03:10,630 --> 00:03:14,555 müssen Sie etwas tun, um dies zu tun. 65 00:03:14,555 --> 00:03:16,400 Wenn also auf den Karussellknopf 66 00:03:16,400 --> 00:03:18,640 geklickt wird, was tun Sie dann? 67 00:03:18,640 --> 00:03:26,630 Zum Glück können 68 00:03:26,630 --> 00:03:29,170 wir nun, je nachdem, ob es sich bei der Schaltfläche um eine Wiedergabetaste oder eine Pause-Taste handelt, eine entsprechende Aktion ergreifen. 69 00:03:29,170 --> 00:03:30,620 Aber woher wissen wir, ob es 70 00:03:30,620 --> 00:03:32,300 sich um einen Play-Button oder um einen Pause-Button handelt? 71 00:03:32,300 --> 00:03:35,960 Hier werden wir also 72 00:03:35,960 --> 00:03:39,005 etwas jQuery-Code verwenden, um zu 73 00:03:39,005 --> 00:03:42,890 identifizieren, ob es sich um einen Play-Button oder eine Pause-Taste handelt. 74 00:03:42,890 --> 00:03:45,230 Um uns zu helfen, dies zu identifizieren, 75 00:03:45,230 --> 00:03:50,750 gehen wir hier rein und verwenden dann eine if-Anweisung, 76 00:03:50,750 --> 00:03:53,255 und da drinnen werde ich testen, um 77 00:03:53,255 --> 00:03:56,585 zu sehen, ob es sich um ein Spiel oder eine Pause-Taste handelt. 78 00:03:56,585 --> 00:03:59,010 Also hier sage ich, 79 00:04:00,550 --> 00:04:08,955 CarouselButton.Kinder Spannweite. 80 00:04:08,955 --> 00:04:10,530 Was bedeutet, dass 81 00:04:10,530 --> 00:04:12,115 für diesen Karussellknopf, 82 00:04:12,115 --> 00:04:19,380 in dem, wenn es ein Element mit dem Span-Tag gibt, 83 00:04:19,380 --> 00:04:22,790 so dass wir offensichtlich wissen, dass 84 00:04:22,790 --> 00:04:24,620 wir in unserem Karussellknopf das Span-Tag hatten, das 85 00:04:24,620 --> 00:04:28,910 das Font Awesome Symbol dort enthielt. 86 00:04:28,910 --> 00:04:31,025 Also für dieses Span-Tag, 87 00:04:31,025 --> 00:04:34,440 werden wir HasClass überprüfen. 88 00:04:36,020 --> 00:04:39,540 Also werden wir diese HasClass überprüfen, 89 00:04:39,540 --> 00:04:42,020 und dann 90 00:04:42,020 --> 00:04:46,440 ist die Klasse, nach der wir suchen werden, fa-Pause. 91 00:04:46,910 --> 00:04:49,170 Was bedeutet, dass, 92 00:04:49,170 --> 00:04:53,445 wenn das span-Tag die fa-pause-Klasse hat, 93 00:04:53,445 --> 00:04:55,760 dann wissen wir, dass diese Schaltfläche 94 00:04:55,760 --> 00:04:58,085 derzeit als Pause-Taste fungiert. 95 00:04:58,085 --> 00:05:00,770 Wenn also auf die Schaltfläche geklickt wird, 96 00:05:00,770 --> 00:05:03,135 erwartet der Benutzer, dass 97 00:05:03,135 --> 00:05:07,195 das zyklische Verhalten angehalten werden sollte. 98 00:05:07,195 --> 00:05:09,200 Das ist es, was wir hier identifizieren. 99 00:05:09,200 --> 00:05:11,480 So sehen Sie jetzt, dass wir 100 00:05:11,480 --> 00:05:15,260 etwas fortgeschritteneren JavaScript-Code mit 101 00:05:15,260 --> 00:05:19,775 der jQuery-Syntax schreiben, damit dies korrekt funktioniert. 102 00:05:19,775 --> 00:05:23,615 Also hier drinnen, also was muss ich tun? 103 00:05:23,615 --> 00:05:27,105 Nun, was bedeutet, dass, wenn die Schaltfläche 104 00:05:27,105 --> 00:05:31,605 derzeit eine Pause-Taste ist 105 00:05:31,605 --> 00:05:34,615 , dann, wenn die Schaltfläche angeklickt wird, 106 00:05:34,615 --> 00:05:37,250 Sie das Karussell pausieren möchten. 107 00:05:37,250 --> 00:05:41,825 Darüber hinaus möchten wir nun in der Lage sein, 108 00:05:41,825 --> 00:05:48,680 dieses Symbol von einem Pause-Symbol zu einem Wiedergabesymbol umzukehren. 109 00:05:48,680 --> 00:05:50,750 Also, was wir tun werden, ist, 110 00:05:50,750 --> 00:05:53,540 werden wir sagen, genau dort nach diesem, 111 00:05:53,540 --> 00:06:11,175 wir sagen $carouselButton.Kinder Spannweite, 112 00:06:11,175 --> 00:06:15,330 und dann werden wir sagen, removeClass. 113 00:06:15,330 --> 00:06:23,915 Also werden wir die Pause-Klasse entfernen. 114 00:06:23,915 --> 00:06:25,990 Also beachte, wie das funktioniert. 115 00:06:25,990 --> 00:06:29,185 Wir werden die Pause-Klasse daraus entfernen, 116 00:06:29,185 --> 00:06:33,990 und dann werden wir die PlayClass hinzufügen. 117 00:06:33,990 --> 00:06:38,170 Auf diese Weise wird das Symbol Ihrer Schaltfläche 118 00:06:38,170 --> 00:06:42,370 jetzt von einer Pause-Taste auf eine Wiedergabe-Schaltfläche gekippt. 119 00:06:42,370 --> 00:06:45,250 Also werden wir die PauseClass entfernen. 120 00:06:45,250 --> 00:06:48,340 Ich kopiere diesen Code einfach und 121 00:06:48,340 --> 00:06:49,960 füge ihn dann direkt 122 00:06:49,960 --> 00:06:52,300 dort ein und mache dann die Bearbeitung an diesem Code. 123 00:06:52,300 --> 00:06:55,930 Gleiches gilt für den CarouselButton für die Kinder Spanne, 124 00:06:55,930 --> 00:06:58,855 ich werde stattdessen die removeClass, 125 00:06:58,855 --> 00:07:03,355 ich würde AddClass sagen, und dann fa-Play. 126 00:07:03,355 --> 00:07:05,800 Auf diese Weise, was wir tun, ist, 127 00:07:05,800 --> 00:07:07,765 dass wir diese Schaltfläche von 128 00:07:07,765 --> 00:07:10,695 einer Pause-Taste auf einen Play-Button umdrehen. 129 00:07:10,695 --> 00:07:16,310 Außerdem pausieren wir 130 00:07:16,310 --> 00:07:19,355 das Radverhalten des Karussell. 131 00:07:19,355 --> 00:07:22,795 Nun, wenn dies nicht der Fall ist, 132 00:07:22,795 --> 00:07:24,870 sollte es eine Play-Schaltfläche sein, so dass 133 00:07:24,870 --> 00:07:30,060 der gegenteilige Effekt eingeführt werden sollte. 134 00:07:30,060 --> 00:07:33,815 Dann werde ich diesen Code einfach kopieren 135 00:07:33,815 --> 00:07:38,900 und dann die anderen Tests für die 136 00:07:38,900 --> 00:07:44,105 Situation durchführen, in der die Schaltfläche ein PlayButton ist. 137 00:07:44,105 --> 00:07:49,020 Also würde ich sonst sagen, jetzt natürlich, 138 00:07:49,020 --> 00:07:54,750 ich brauche das nicht, wenn hier, aber nur um doppelt sicher 139 00:07:54,750 --> 00:07:57,220 zu sein, werde ich das da reinbringen. 140 00:07:58,060 --> 00:08:00,830 Weil es nur zwei Möglichkeiten gibt, 141 00:08:00,830 --> 00:08:02,750 entweder ist es eine Pause-Taste oder eine Play-Taste, 142 00:08:02,750 --> 00:08:06,530 aber nur für meine Beruhigung, 143 00:08:06,530 --> 00:08:10,010 werde ich das als Fa-Play dort setzen. 144 00:08:10,010 --> 00:08:12,950 Jetzt drinnen werde ich 145 00:08:12,950 --> 00:08:16,530 das von Pause zu Zyklus ändern. 146 00:08:16,530 --> 00:08:18,230 Da 147 00:08:18,230 --> 00:08:19,700 Sie aus der vorherigen Übung daran denken, dass Sie, wenn Sie 148 00:08:19,700 --> 00:08:21,575 das Zyklusverhalten fortsetzen 149 00:08:21,575 --> 00:08:29,205 möchten, die Karussellaktion auf Zyklus festlegen müssen. 150 00:08:29,205 --> 00:08:33,840 Dann 151 00:08:33,840 --> 00:08:37,875 werde ich für die verbleibenden zwei Anweisungen die PlayClass entfernen 152 00:08:37,875 --> 00:08:42,715 und dann die PauseClass hinzufügen. 153 00:08:42,715 --> 00:08:48,095 Beachten Sie also, wie wir ein wenig 154 00:08:48,095 --> 00:08:52,310 fortgeschrittenen jQuery-Code verwenden 155 00:08:52,310 --> 00:08:56,854 , um das Schaltflächensymbol dynamisch ändern zu können 156 00:08:56,854 --> 00:08:58,460 und gleichzeitig 157 00:08:58,460 --> 00:09:03,140 das entsprechende Radverhalten auf unserem Karussell zu induzieren. Wenn Sie 158 00:09:03,140 --> 00:09:05,760 einen Blick auf unsere Webseite werfen, 159 00:09:05,760 --> 00:09:09,390 sehen Sie jetzt, dass mein Karussell Radfahren ist, 160 00:09:09,390 --> 00:09:14,465 und Sie sehen, dass dieser Button derzeit eine Pause-Taste ist. 161 00:09:14,465 --> 00:09:16,130 Wenn ich auf diese Schaltfläche klicke, 162 00:09:16,130 --> 00:09:21,855 merke, wie es sich dort von Pause zu einer Wiedergabe-Schaltfläche ändert 163 00:09:21,855 --> 00:09:23,865 , und dann gleichzeitig 164 00:09:23,865 --> 00:09:27,325 wird mein Radverhalten des Karusells angehalten. 165 00:09:27,325 --> 00:09:28,840 An dieser Stelle 166 00:09:28,840 --> 00:09:31,460 bleibt mein Karussell an dieser 167 00:09:31,460 --> 00:09:34,700 Stelle pausiert, bis ich auf die Schaltfläche klicke. 168 00:09:34,700 --> 00:09:36,950 Wenn ich nun erneut auf diese Schaltfläche klicke, 169 00:09:36,950 --> 00:09:40,130 notieren Sie die Änderung von der Wiedergabe-Schaltfläche zu einer Pause-Taste, 170 00:09:40,130 --> 00:09:42,320 und dann 171 00:09:42,320 --> 00:09:44,795 wird das Radverhalten des Karusells an Ort und Stelle fortgesetzt. 172 00:09:44,795 --> 00:09:46,625 Mit einer einzigen Taste 173 00:09:46,625 --> 00:09:50,570 kann ich nun sowohl das 174 00:09:50,570 --> 00:09:54,695 Verhalten des Karusells steuern als auch gleichzeitig 175 00:09:54,695 --> 00:09:57,125 den aktuellen Zustand 176 00:09:57,125 --> 00:09:59,460 des Radverhaltens meines Karussells anzeigen. 177 00:09:59,460 --> 00:10:00,740 Wenn das ein Pause-Button ist, 178 00:10:00,740 --> 00:10:03,050 bedeutet das, dass mein Karussell gerade Rad fährt. 179 00:10:03,050 --> 00:10:04,535 Wenn das eine Wiedergabe-Schaltfläche ist, 180 00:10:04,535 --> 00:10:06,560 wird mein Karussell angehalten. 181 00:10:06,560 --> 00:10:08,630 Um es fortzusetzen, 182 00:10:08,630 --> 00:10:10,175 muss ich auf die Schaltfläche klicken. 183 00:10:10,175 --> 00:10:14,600 Dies ist also eine weitere Änderung 184 00:10:14,600 --> 00:10:17,120 , die Sie an der Übung vornehmen können. 185 00:10:17,120 --> 00:10:20,480 Jetzt sehen Sie, wie wir in unserem Code 186 00:10:20,480 --> 00:10:24,629 die HasClass-Methode verwendet haben, 187 00:10:24,629 --> 00:10:27,000 und wir sahen auch die Verwendung 188 00:10:27,000 --> 00:10:30,990 der removeClass- und AddClass-Methoden, 189 00:10:30,990 --> 00:10:33,770 jQuery-Methoden, die wir angewendet haben, 190 00:10:33,770 --> 00:10:36,845 um das DOM zu manipulieren, um 191 00:10:36,845 --> 00:10:39,545 das Verhalten 192 00:10:39,545 --> 00:10:43,445 in diesem speziellen Fall als relevant zu reflektieren. 193 00:10:43,445 --> 00:10:47,755 Damit schließen wir diese Übung ab. 194 00:10:47,755 --> 00:10:51,450 Es ist Zeit für Sie, ein Git-Commit mit 195 00:10:51,450 --> 00:10:56,710 der Nachricht mehr Bootstrap und jQuery zu machen.