1
00:00:03,530 --> 00:00:06,090
В предыдущем упражнении

2
00:00:06,090 --> 00:00:08,370
мы видели, как мы можем использовать

3
00:00:08,370 --> 00:00:11,820
элементы управления на основе JavaScript, которые предоставляются для

4
00:00:11,820 --> 00:00:14,820
компонентов Bootstrap JavaScript,

5
00:00:14,820 --> 00:00:18,240
чтобы контролировать поведение компонентов.

6
00:00:18,240 --> 00:00:23,370
В частности, мы видели использование карусели и

7
00:00:23,370 --> 00:00:25,140
как мы смогли ввести

8
00:00:25,140 --> 00:00:26,880
две кнопки для управления

9
00:00:26,880 --> 00:00:29,190
велосипедным поведением карусели.

10
00:00:29,190 --> 00:00:33,645
Теперь я не полностью удовлетворен этой реализацией.

11
00:00:33,645 --> 00:00:36,510
Я хотел бы теперь свернуть все это

12
00:00:36,510 --> 00:00:39,270
в одну кнопку, которая может

13
00:00:39,270 --> 00:00:42,690
указывать как

14
00:00:42,690 --> 00:00:46,625
текущее поведение карусели, так и управлять каруселью.

15
00:00:46,625 --> 00:00:50,225
Итак, давайте посмотрим, как мы можем использовать

16
00:00:50,225 --> 00:00:53,180
дальнейший код jQuery,

17
00:00:53,180 --> 00:00:56,800
чтобы достичь этого, в этом упражнении.

18
00:00:56,800 --> 00:01:00,575
Чтобы добиться этого, мы вернемся к коду

19
00:01:00,575 --> 00:01:03,995
в index.html, где мы определили две кнопки.

20
00:01:03,995 --> 00:01:08,960
Теперь я собираюсь удалить этот div для

21
00:01:08,960 --> 00:01:11,135
группы кнопок, потому что у нас будет

22
00:01:11,135 --> 00:01:14,510
только одна кнопка вместо двух кнопок.

23
00:01:14,510 --> 00:01:18,620
Поэтому я удалил div вокруг двух кнопок.

24
00:01:18,620 --> 00:01:20,660
Я также удалю одну из кнопок,

25
00:01:20,660 --> 00:01:22,415
потому что мы будем работать

26
00:01:22,415 --> 00:01:25,640
только с одной кнопкой для этого упражнения.

27
00:01:25,640 --> 00:01:28,640
Поэтому позвольте мне изменить отступ.

28
00:01:28,640 --> 00:01:32,450
Так что теперь, эта конкретная кнопка, которая у нас есть,

29
00:01:32,450 --> 00:01:36,090
я собираюсь переименовать эту кнопку как CarouselButton.

30
00:01:37,120 --> 00:01:40,580
Мы начнем с этой кнопки,

31
00:01:40,580 --> 00:01:43,940
являющейся кнопкой со значком паузы.

32
00:01:43,940 --> 00:01:46,280
Мы собираемся перевернуть значок для

33
00:01:46,280 --> 00:01:49,235
этой кнопки через код JavaScript.

34
00:01:49,235 --> 00:01:50,750
Так как же нам это сделать?

35
00:01:50,750 --> 00:01:53,480
Взглянув на нашу веб-страницу,

36
00:01:53,480 --> 00:01:56,855
мы теперь увидим, что у нас есть одна кнопка здесь,

37
00:01:56,855 --> 00:02:00,830
которая в настоящее время указывает на паузу там.

38
00:02:00,830 --> 00:02:05,530
Теперь я надеюсь, что в конце этого упражнения

39
00:02:05,530 --> 00:02:07,580
превратить эту кнопку в

40
00:02:07,580 --> 00:02:10,730
единый элемент управления, при котором, если я

41
00:02:10,730 --> 00:02:15,210
нажму на эту кнопку, он приостановит циклическое поведение карусели,

42
00:02:15,210 --> 00:02:17,120
а затем одновременно превратит

43
00:02:17,120 --> 00:02:19,790
эту кнопку в кнопку воспроизведения,

44
00:02:19,790 --> 00:02:21,590
что означает, что эта иконка

45
00:02:21,590 --> 00:02:23,705
будет заменена со значком воспроизведения.

46
00:02:23,705 --> 00:02:27,170
Так что эта единственная кнопка указывает

47
00:02:27,170 --> 00:02:29,090
на

48
00:02:29,090 --> 00:02:33,400
текущее состояние циклического поведения моей карусели. Как нам это сделать?

49
00:02:33,400 --> 00:02:34,940
Нам нужно пойти и отредактировать

50
00:02:34,940 --> 00:02:38,010
код JavaScript, чтобы достичь этого.

51
00:02:38,010 --> 00:02:41,240
Перейдя к коду JavaScript

52
00:02:41,240 --> 00:02:43,910
в нижней части страницы index.html.

53
00:02:43,910 --> 00:02:47,450
Итак, у нас был этот скрипт, который мы

54
00:02:47,450 --> 00:02:49,580
включили ранее

55
00:02:49,580 --> 00:02:52,325
, чтобы активировать две кнопки там.

56
00:02:52,325 --> 00:02:54,980
Я собираюсь отредактировать этот код,

57
00:02:54,980 --> 00:02:58,685
чтобы использовать ту единственную кнопку, которая у нас есть.

58
00:02:58,685 --> 00:03:00,860
Поэтому, спускаясь сюда,

59
00:03:00,860 --> 00:03:01,910
я собираюсь удалить

60
00:03:01,910 --> 00:03:03,950
эту вторую часть, потому что

61
00:03:03,950 --> 00:03:06,190
сейчас у нас есть только одна кнопка,

62
00:03:06,190 --> 00:03:08,575
которая является CarouselButton,

63
00:03:08,575 --> 00:03:10,630
и всякий раз, когда она нажата,

64
00:03:10,630 --> 00:03:14,555
вам нужно что-то сделать в ответ на это.

65
00:03:14,555 --> 00:03:16,400
Итак, если

66
00:03:16,400 --> 00:03:18,640
нажата кнопка карусели, то что вы делаете?

67
00:03:18,640 --> 00:03:22,370
Теперь, к счастью,

68
00:03:22,370 --> 00:03:26,630
в зависимости от того, является ли кнопка «Воспроизведение» или «Пауза»,

69
00:03:26,630 --> 00:03:29,170
мы сможем предпринять соответствующие действия.

70
00:03:29,170 --> 00:03:30,620
Но как мы узнаем,

71
00:03:30,620 --> 00:03:32,300
является ли это кнопка воспроизведения или кнопка паузы?

72
00:03:32,300 --> 00:03:35,960
Таким образом, здесь мы собираемся использовать

73
00:03:35,960 --> 00:03:39,005
некоторый код jQuery, чтобы

74
00:03:39,005 --> 00:03:42,890
определить, является ли это кнопкой воспроизведения или кнопкой паузы.

75
00:03:42,890 --> 00:03:45,230
Чтобы помочь нам определить это,

76
00:03:45,230 --> 00:03:50,750
мы идем внутрь здесь, а затем использовать оператор if

77
00:03:50,750 --> 00:03:53,255
, и внутри, я

78
00:03:53,255 --> 00:03:56,585
собираюсь проверить, является ли это игрой или кнопкой паузы.

79
00:03:56,585 --> 00:03:59,010
Так вот я говорю,

80
00:04:00,550 --> 00:04:08,955
каруселButton. Дети простираются. Это

81
00:04:08,955 --> 00:04:10,530
означает, что

82
00:04:10,530 --> 00:04:12,115
для этой кнопки карусели,

83
00:04:12,115 --> 00:04:19,380
внутри, где, если есть элемент с тегом span,

84
00:04:19,380 --> 00:04:22,790
так что мы, очевидно, знаем, что в нашей кнопке карусели,

85
00:04:22,790 --> 00:04:24,620
у нас был тег span, который

86
00:04:24,620 --> 00:04:28,910
содержал значок Font Awesome там.

87
00:04:28,910 --> 00:04:31,025
Поэтому для этого тега span

88
00:04:31,025 --> 00:04:34,440
мы собираемся проверить HasClass.

89
00:04:36,020 --> 00:04:39,540
Итак, мы собираемся проверить этот HasClass,

90
00:04:39,540 --> 00:04:42,020
а затем класс, который мы собираемся

91
00:04:42,020 --> 00:04:46,440
проверить, является fa-pause.

92
00:04:46,910 --> 00:04:49,170
Это означает, что

93
00:04:49,170 --> 00:04:53,445
если тег span имеет класс fa-pause,

94
00:04:53,445 --> 00:04:55,760
то мы знаем, что эта кнопка в

95
00:04:55,760 --> 00:04:58,085
настоящее время действует как кнопка паузы.

96
00:04:58,085 --> 00:05:00,770
Таким образом, очевидно, когда кнопка

97
00:05:00,770 --> 00:05:03,135
нажата, пользователь ожидает, что

98
00:05:03,135 --> 00:05:07,195
циклическое поведение должно быть приостановлено.

99
00:05:07,195 --> 00:05:09,200
Так вот, что мы здесь идентифицируем.

100
00:05:09,200 --> 00:05:11,480
Таким образом, вы теперь видите, что мы пишем

101
00:05:11,480 --> 00:05:15,260
более продвинутый код JavaScript

102
00:05:15,260 --> 00:05:19,775
, используя синтаксис jQuery, чтобы сделать эту работу правильной.

103
00:05:19,775 --> 00:05:23,615
Итак, внутри, так что мне нужно сделать?

104
00:05:23,615 --> 00:05:27,105
Теперь, так что это означает, что если кнопка

105
00:05:27,105 --> 00:05:31,605
в настоящее время является кнопкой Пауза

106
00:05:31,605 --> 00:05:34,615
, то, очевидно, когда кнопка нажата,

107
00:05:34,615 --> 00:05:37,250
вы хотите приостановить карусель.

108
00:05:37,250 --> 00:05:41,825
Затем, кроме того, мы хотим теперь иметь возможность переворачивать

109
00:05:41,825 --> 00:05:48,680
этот значок из значка паузы на значок воспроизведения.

110
00:05:48,680 --> 00:05:50,750
Так что мы будем делать,

111
00:05:50,750 --> 00:05:53,540
мы скажем прямо там после этого,

112
00:05:53,540 --> 00:06:11,175
мы скажем $CarouselButton.Children span,

113
00:06:11,175 --> 00:06:15,330
а затем мы скажем, removeClass.

114
00:06:15,330 --> 00:06:23,915
Итак, мы удалим класс паузы.

115
00:06:23,915 --> 00:06:25,990
Так что обратите внимание, как это работает.

116
00:06:25,990 --> 00:06:29,185
Мы удалим класс паузы из этого,

117
00:06:29,185 --> 00:06:33,990
а затем, мы добавим PlayClass.

118
00:06:33,990 --> 00:06:38,170
Таким образом, значок кнопки теперь

119
00:06:38,170 --> 00:06:42,370
будет перевернут с кнопки Пауза на кнопку Воспроизвести.

120
00:06:42,370 --> 00:06:45,250
Итак, мы собираемся удалить PauseClass.

121
00:06:45,250 --> 00:06:48,340
Я просто скопирую этот код, а

122
00:06:48,340 --> 00:06:49,960
затем вставьте его прямо

123
00:06:49,960 --> 00:06:52,300
там, а затем выполните редактирование этого кода.

124
00:06:52,300 --> 00:06:55,930
То же самое, для CarouselButton для детей,

125
00:06:55,930 --> 00:06:58,855
я собираюсь вместо RemoveClass,

126
00:06:58,855 --> 00:07:03,355
я бы сказал addClass, а затем fa-play.

127
00:07:03,355 --> 00:07:05,800
Таким образом, то, что мы делаем,

128
00:07:05,800 --> 00:07:07,765
мы переворачиваем эту кнопку

129
00:07:07,765 --> 00:07:10,695
с кнопки паузы на кнопку воспроизведения.

130
00:07:10,695 --> 00:07:16,310
Кроме того, мы

131
00:07:16,310 --> 00:07:19,355
приостанавливаем поведение карусели на велосипеде.

132
00:07:19,355 --> 00:07:22,795
Теперь, если это не так, то

133
00:07:22,795 --> 00:07:24,870
это должна быть кнопка Play, так что

134
00:07:24,870 --> 00:07:30,060
должен быть введен противоположный эффект.

135
00:07:30,060 --> 00:07:33,815
Затем я собираюсь просто скопировать этот код,

136
00:07:33,815 --> 00:07:38,900
а затем сделать другие тесты для ситуации,

137
00:07:38,900 --> 00:07:44,105
когда кнопка является PlayButton.

138
00:07:44,105 --> 00:07:49,020
Так что я бы сказал, что теперь, очевидно,

139
00:07:49,020 --> 00:07:54,750
мне это не нужно, если бы здесь, но чтобы быть вдвойне уверенным,

140
00:07:54,750 --> 00:07:57,220
я собираюсь положить это туда.

141
00:07:58,060 --> 00:08:00,830
Потому что есть только две возможности,

142
00:08:00,830 --> 00:08:02,750
либо это кнопка паузы или кнопка воспроизведения,

143
00:08:02,750 --> 00:08:06,530
но только для моей уверенности,

144
00:08:06,530 --> 00:08:10,010
я собираюсь поставить это как fa-play там.

145
00:08:10,010 --> 00:08:12,950
Теперь внутри, я собираюсь изменить

146
00:08:12,950 --> 00:08:16,530
это с паузы на цикл.

147
00:08:16,530 --> 00:08:18,230
Поскольку из предыдущего упражнения

148
00:08:18,230 --> 00:08:19,700
вы помните, что если вы хотите,

149
00:08:19,700 --> 00:08:21,575
чтобы поведение на велосипеде возобновилось,

150
00:08:21,575 --> 00:08:29,205
вам придется установить действие карусели как цикл.

151
00:08:29,205 --> 00:08:33,840
Затем аналогичным образом, для остальных двух операторов,

152
00:08:33,840 --> 00:08:37,875
я собираюсь удалить PlayClass,

153
00:08:37,875 --> 00:08:42,715
а затем добавить PauseClass.

154
00:08:42,715 --> 00:08:48,095
Поэтому обратите внимание, как мы используем немного

155
00:08:48,095 --> 00:08:52,310
продвинутого кода jQuery,

156
00:08:52,310 --> 00:08:56,854
чтобы иметь возможность динамически изменять значок кнопок

157
00:08:56,854 --> 00:08:58,460
и в то же время

158
00:08:58,460 --> 00:09:03,140
вызывать соответствующее поведение велосипеда на нашей карусели.

159
00:09:03,140 --> 00:09:05,760
Взглянув на нашу веб-страницу,

160
00:09:05,760 --> 00:09:09,390
вы видите, что моя карусель ездит на велосипеде,

161
00:09:09,390 --> 00:09:14,465
и вы видите, что эта кнопка в настоящее время является кнопкой паузы.

162
00:09:14,465 --> 00:09:16,130
Когда я нажимаю на эту кнопку,

163
00:09:16,130 --> 00:09:21,855
обратите внимание, как она меняется с паузы на кнопку воспроизведения

164
00:09:21,855 --> 00:09:23,865
, а затем

165
00:09:23,865 --> 00:09:27,325
одновременно мое поведение карусели приостанавливается.

166
00:09:27,325 --> 00:09:28,840
Таким образом, на данный момент

167
00:09:28,840 --> 00:09:31,460
моя карусель будет оставаться приостановленной в

168
00:09:31,460 --> 00:09:34,700
этом месте, пока я не нажму кнопку.

169
00:09:34,700 --> 00:09:36,950
Итак, если я снова

170
00:09:36,950 --> 00:09:40,130
нажму эту кнопку, обратите внимание на изменение кнопки «Воспроизведение» на «

171
00:09:40,130 --> 00:09:42,320
Пауза», а затем поведение

172
00:09:42,320 --> 00:09:44,795
карусели на месте возобновится.

173
00:09:44,795 --> 00:09:46,625
Таким образом, используя одну кнопку сейчас,

174
00:09:46,625 --> 00:09:50,570
я могу управлять

175
00:09:50,570 --> 00:09:54,695
поведением карусели, а также одновременно

176
00:09:54,695 --> 00:09:57,125
отображать текущее состояние

177
00:09:57,125 --> 00:09:59,460
поведения моей карусели на велосипеде.

178
00:09:59,460 --> 00:10:00,740
Если это кнопка Пауза, это

179
00:10:00,740 --> 00:10:03,050
означает, что моя карусель в настоящее время ездит на велосипеде.

180
00:10:03,050 --> 00:10:04,535
Если это кнопка «Воспроизведение»,

181
00:10:04,535 --> 00:10:06,560
то моя карусель приостанавливается.

182
00:10:06,560 --> 00:10:08,630
Поэтому, чтобы возобновить его,

183
00:10:08,630 --> 00:10:10,175
мне придется нажать на кнопку.

184
00:10:10,175 --> 00:10:14,600
Таким образом, это еще одно дополнительное изменение

185
00:10:14,600 --> 00:10:17,120
, которое вы можете сделать в упражнении.

186
00:10:17,120 --> 00:10:20,480
Итак, теперь вы видите, как в нашем коде мы

187
00:10:20,480 --> 00:10:24,629
использовали метод HasClass,

188
00:10:24,629 --> 00:10:27,000
и мы также видели использование методов

189
00:10:27,000 --> 00:10:30,990
RemoveClass и AddClass, методов

190
00:10:30,990 --> 00:10:33,770
jQuery, которые мы применили,

191
00:10:33,770 --> 00:10:36,845
чтобы манипулировать DOM, чтобы

192
00:10:36,845 --> 00:10:39,545
отразить поведение как

193
00:10:39,545 --> 00:10:43,445
уместное в этом конкретном случае.

194
00:10:43,445 --> 00:10:47,755
С этим мы завершаем это упражнение.

195
00:10:47,755 --> 00:10:51,450
Пришло время для вас сделать фиксацию Git с

196
00:10:51,450 --> 00:10:56,710
сообщением больше Bootstrap и jQuery.