1
00:00:03,530 --> 00:00:06,090
Trong bài tập trước,

2
00:00:06,090 --> 00:00:08,370
chúng ta đã thấy làm thế nào chúng ta có thể tận dụng

3
00:00:08,370 --> 00:00:11,820
các điều khiển dựa trên JavaScript được cung cấp cho

4
00:00:11,820 --> 00:00:14,820
các thành phần Bootstrap JavaScript

5
00:00:14,820 --> 00:00:18,240
để kiểm soát hành vi của các thành phần.

6
00:00:18,240 --> 00:00:23,370
Đặc biệt, chúng tôi đã thấy việc sử dụng băng chuyền và

7
00:00:23,370 --> 00:00:25,140
làm thế nào chúng tôi đã có thể giới thiệu

8
00:00:25,140 --> 00:00:26,880
hai nút để kiểm soát

9
00:00:26,880 --> 00:00:29,190
hành vi đi xe đạp của băng chuyền.

10
00:00:29,190 --> 00:00:33,645
Bây giờ, tôi không hoàn toàn hài lòng với việc thực hiện đó.

11
00:00:33,645 --> 00:00:36,510
Tôi muốn bây giờ thu gọn toàn bộ điều

12
00:00:36,510 --> 00:00:39,270
thành một nút duy nhất có thể

13
00:00:39,270 --> 00:00:42,690
chỉ ra hành vi hiện tại

14
00:00:42,690 --> 00:00:46,625
của băng chuyền và cũng có thể kiểm soát băng chuyền.

15
00:00:46,625 --> 00:00:50,225
Vì vậy, chúng ta hãy xem làm thế nào chúng ta có thể tận dụng

16
00:00:50,225 --> 00:00:53,180
thêm mã jQuery

17
00:00:53,180 --> 00:00:56,800
để đạt được điều này, trong bài tập này.

18
00:00:56,800 --> 00:01:00,575
Để đạt được điều đó, chúng tôi sẽ quay trở lại mã

19
00:01:00,575 --> 00:01:03,995
trong index.html nơi chúng tôi xác định hai nút.

20
00:01:03,995 --> 00:01:08,960
Tôi sẽ bây giờ loại bỏ div này cho

21
00:01:08,960 --> 00:01:11,135
nhóm nút bởi vì chúng ta sẽ

22
00:01:11,135 --> 00:01:14,510
chỉ có một nút duy nhất thay vì hai nút.

23
00:01:14,510 --> 00:01:18,620
Vì vậy, tôi đã loại bỏ các div xung quanh hai nút.

24
00:01:18,620 --> 00:01:20,660
Tôi cũng sẽ xóa một trong các nút,

25
00:01:20,660 --> 00:01:22,415
bởi vì chúng tôi sẽ làm việc với

26
00:01:22,415 --> 00:01:25,640
chỉ một nút duy nhất cho bài tập này.

27
00:01:25,640 --> 00:01:28,640
Vì vậy, hãy để tôi thay đổi thụt lề.

28
00:01:28,640 --> 00:01:32,450
Vì vậy, bây giờ, nút đặc biệt này mà chúng tôi có,

29
00:01:32,450 --> 00:01:36,090
Tôi sẽ đổi tên nút này như CarouselButton.

30
00:01:37,120 --> 00:01:40,580
Chúng tôi sẽ bắt đầu với nút này là

31
00:01:40,580 --> 00:01:43,940
một nút có biểu tượng tạm dừng.

32
00:01:43,940 --> 00:01:46,280
Chúng ta sẽ lật biểu tượng cho

33
00:01:46,280 --> 00:01:49,235
nút này thông qua mã JavaScript.

34
00:01:49,235 --> 00:01:50,750
Vậy làm thế nào để chúng ta làm điều đó?

35
00:01:50,750 --> 00:01:53,480
Hãy xem trang web của chúng tôi,

36
00:01:53,480 --> 00:01:56,855
bây giờ chúng ta sẽ thấy rằng chúng ta có một nút duy nhất ở đây,

37
00:01:56,855 --> 00:02:00,830
mà hiện đang chỉ ra tạm dừng ở đó.

38
00:02:00,830 --> 00:02:05,530
Bây giờ, hy vọng của tôi vào cuối bài tập này

39
00:02:05,530 --> 00:02:07,580
là biến nút này thành

40
00:02:07,580 --> 00:02:10,730
một điều khiển duy nhất theo đó nếu tôi nhấp vào nút này,

41
00:02:10,730 --> 00:02:15,210
nó sẽ tạm dừng hành vi tuần hoàn của băng chuyền,

42
00:02:15,210 --> 00:02:17,120
và sau đó đồng thời biến

43
00:02:17,120 --> 00:02:19,790
nút này thành một nút chơi, có

44
00:02:19,790 --> 00:02:21,590
nghĩa là biểu tượng này

45
00:02:21,590 --> 00:02:23,705
sẽ được thay thế với biểu tượng phát.

46
00:02:23,705 --> 00:02:27,170
Vì vậy, nút duy nhất này cho biết

47
00:02:27,170 --> 00:02:29,090
trạng thái hiện tại

48
00:02:29,090 --> 00:02:33,400
của hành vi tuần hoàn của băng chuyền của tôi là gì. Làm thế nào để chúng ta làm điều đó?

49
00:02:33,400 --> 00:02:34,940
Chúng ta cần phải đi và chỉnh sửa

50
00:02:34,940 --> 00:02:38,010
mã JavaScript để đạt được điều đó.

51
00:02:38,010 --> 00:02:41,240
Đi xuống mã JavaScript

52
00:02:41,240 --> 00:02:43,910
ở cuối trang index.html.

53
00:02:43,910 --> 00:02:47,450
Vì vậy, ở đây, chúng tôi đã có kịch bản này mà chúng tôi đã

54
00:02:47,450 --> 00:02:49,580
bao gồm trước đó

55
00:02:49,580 --> 00:02:52,325
để kích hoạt hai nút ở đó.

56
00:02:52,325 --> 00:02:54,980
Tôi sẽ chỉnh sửa mã này

57
00:02:54,980 --> 00:02:58,685
để sử dụng nút duy nhất mà chúng tôi có ở đó.

58
00:02:58,685 --> 00:03:00,860
Vì vậy, đến đây,

59
00:03:00,860 --> 00:03:01,910
tôi sẽ loại bỏ

60
00:03:01,910 --> 00:03:03,950
phần thứ hai này bởi vì chúng tôi

61
00:03:03,950 --> 00:03:06,190
chỉ có một nút duy nhất bây giờ ở đây,

62
00:03:06,190 --> 00:03:08,575
đó là CarouselButton,

63
00:03:08,575 --> 00:03:10,630
và bất cứ khi nào đó được nhấp,

64
00:03:10,630 --> 00:03:14,555
bạn cần phải làm một cái gì đó để đáp ứng với làm điều đó.

65
00:03:14,555 --> 00:03:16,400
Vì vậy, nếu nút băng chuyền được

66
00:03:16,400 --> 00:03:18,640
nhấp, sau đó bạn sẽ làm gì?

67
00:03:18,640 --> 00:03:22,370
Bây giờ, may mắn thay, tùy thuộc vào

68
00:03:22,370 --> 00:03:26,630
việc nút là nút Phát hay nút Tạm dừng,

69
00:03:26,630 --> 00:03:29,170
chúng tôi sẽ có thể thực hiện một hành động thích hợp.

70
00:03:29,170 --> 00:03:30,620
Nhưng làm thế nào để chúng ta biết liệu đó

71
00:03:30,620 --> 00:03:32,300
là một nút Play hoặc một nút Tạm dừng?

72
00:03:32,300 --> 00:03:35,960
Vì vậy, đây là nơi chúng ta sẽ sử dụng

73
00:03:35,960 --> 00:03:39,005
một số mã jQuery để

74
00:03:39,005 --> 00:03:42,890
xác định xem đây là một nút chơi hoặc một nút tạm dừng.

75
00:03:42,890 --> 00:03:45,230
Để giúp chúng tôi xác định điều này,

76
00:03:45,230 --> 00:03:50,750
chúng tôi sẽ đi vào trong đây và sau đó sử dụng một câu lệnh if

77
00:03:50,750 --> 00:03:53,255
, và bên trong đó, tôi sẽ kiểm

78
00:03:53,255 --> 00:03:56,585
tra xem đây là một nút chơi hay một nút tạm dừng.

79
00:03:56,585 --> 00:03:59,010
Vì vậy, ở đây tôi nói,

80
00:04:00,550 --> 00:04:08,955
CarouselButton.Children span.

81
00:04:08,955 --> 00:04:10,530
Vì vậy, có nghĩa là,

82
00:04:10,530 --> 00:04:12,115
đối với nút băng chuyền này,

83
00:04:12,115 --> 00:04:19,380
bên trong nơi nếu có một phần tử với thẻ span,

84
00:04:19,380 --> 00:04:22,790
vì vậy chúng tôi rõ ràng biết rằng trong nút băng chuyền của chúng

85
00:04:22,790 --> 00:04:24,620
tôi, chúng tôi đã có thẻ span

86
00:04:24,620 --> 00:04:28,910
chứa biểu tượng Font Awesome ở đó.

87
00:04:28,910 --> 00:04:31,025
Vì vậy, cho rằng thẻ span,

88
00:04:31,025 --> 00:04:34,440
chúng ta sẽ kiểm tra HasClass.

89
00:04:36,020 --> 00:04:39,540
Vì vậy, chúng tôi sẽ kiểm tra HasClass này,

90
00:04:39,540 --> 00:04:42,020
và sau đó các lớp mà chúng tôi sẽ

91
00:04:42,020 --> 00:04:46,440
kiểm tra là fa-pause.

92
00:04:46,910 --> 00:04:49,170
Vì vậy, có nghĩa là,

93
00:04:49,170 --> 00:04:53,445
nếu thẻ span có lớp fa-pause,

94
00:04:53,445 --> 00:04:55,760
sau đó chúng ta biết rằng nút này

95
00:04:55,760 --> 00:04:58,085
hiện đang hoạt động như nút tạm dừng.

96
00:04:58,085 --> 00:05:00,770
Vì vậy, rõ ràng, khi nút được nhấp,

97
00:05:00,770 --> 00:05:03,135
người dùng đang mong đợi rằng

98
00:05:03,135 --> 00:05:07,195
hành vi tuần hoàn nên được tạm dừng.

99
00:05:07,195 --> 00:05:09,200
Vì vậy, đó là những gì chúng tôi xác định ở đây.

100
00:05:09,200 --> 00:05:11,480
Vì vậy, bây giờ bạn thấy rằng chúng tôi đang viết

101
00:05:11,480 --> 00:05:15,260
một số mã JavaScript tiên tiến hơn bằng cách sử dụng

102
00:05:15,260 --> 00:05:19,775
cú pháp jQuery để làm cho công việc này một cách chính xác.

103
00:05:19,775 --> 00:05:23,615
Vậy ở trong này, tôi cần phải làm gì đây?

104
00:05:23,615 --> 00:05:27,105
Bây giờ, do đó, có nghĩa

105
00:05:27,105 --> 00:05:31,605
là nếu nút hiện đang là một nút Tạm dừng

106
00:05:31,605 --> 00:05:34,615
, sau đó, rõ ràng khi nút được nhấp,

107
00:05:34,615 --> 00:05:37,250
bạn muốn tạm dừng băng chuyền.

108
00:05:37,250 --> 00:05:41,825
Sau đó, ngoài ra, chúng tôi muốn bây giờ có thể lật

109
00:05:41,825 --> 00:05:48,680
biểu tượng đó từ biểu tượng tạm dừng sang biểu tượng chơi.

110
00:05:48,680 --> 00:05:50,750
Vì vậy, những gì chúng tôi sẽ làm là,

111
00:05:50,750 --> 00:05:53,540
chúng tôi sẽ nói ngay sau này,

112
00:05:53,540 --> 00:06:11,175
chúng tôi sẽ nói $CarouselButton.Children span,

113
00:06:11,175 --> 00:06:15,330
và sau đó chúng tôi sẽ nói, RemoveClass.

114
00:06:15,330 --> 00:06:23,915
Vì vậy, chúng tôi sẽ loại bỏ các lớp tạm dừng.

115
00:06:23,915 --> 00:06:25,990
Vì vậy, hãy chú ý làm thế nào nó hoạt động.

116
00:06:25,990 --> 00:06:29,185
Chúng tôi sẽ loại bỏ các lớp tạm dừng từ đó,

117
00:06:29,185 --> 00:06:33,990
và sau đó, chúng tôi sẽ thêm PlayClass.

118
00:06:33,990 --> 00:06:38,170
Vì vậy, theo cách đó biểu tượng của nút của bạn bây giờ

119
00:06:38,170 --> 00:06:42,370
sẽ được lật từ một nút Tạm dừng sang một nút Phát.

120
00:06:42,370 --> 00:06:45,250
Vì vậy, chúng tôi sẽ loại bỏ PauseClass.

121
00:06:45,250 --> 00:06:48,340
Tôi sẽ chỉ cần sao chép mã này và

122
00:06:48,340 --> 00:06:49,960
sau đó dán nó ngay

123
00:06:49,960 --> 00:06:52,300
ở đó và sau đó thực hiện chỉnh sửa mã này.

124
00:06:52,300 --> 00:06:55,930
Điều tương tự, đối với CarouselButton cho khoảng trẻ em,

125
00:06:55,930 --> 00:06:58,855
tôi sẽ thay vì bây giờ của RemoveClass,

126
00:06:58,855 --> 00:07:03,355
tôi sẽ nói AddClass, và sau đó fa-play.

127
00:07:03,355 --> 00:07:05,800
Vì vậy, theo cách đó, những gì chúng tôi đang làm là,

128
00:07:05,800 --> 00:07:07,765
chúng tôi đang lật nút đó từ

129
00:07:07,765 --> 00:07:10,695
một nút Tạm dừng để một nút Play.

130
00:07:10,695 --> 00:07:16,310
Ngoài ra, chúng tôi đang tạm dừng

131
00:07:16,310 --> 00:07:19,355
hành vi đi xe đạp của băng chuyền.

132
00:07:19,355 --> 00:07:22,795
Bây giờ, nếu đây không phải là trường hợp sau đó,

133
00:07:22,795 --> 00:07:24,870
nó phải là một nút Play để

134
00:07:24,870 --> 00:07:30,060
hiệu ứng ngược lại nên được giới thiệu.

135
00:07:30,060 --> 00:07:33,815
Sau đó, tôi sẽ chỉ đơn giản là sao chép mã này,

136
00:07:33,815 --> 00:07:38,900
và sau đó làm các bài kiểm tra khác cho tình

137
00:07:38,900 --> 00:07:44,105
huống mà nút là một PlayButton.

138
00:07:44,105 --> 00:07:49,020
Vì vậy, tôi sẽ nói khác, bây giờ rõ ràng,

139
00:07:49,020 --> 00:07:54,750
tôi không cần điều này nếu ở đây, nhưng chỉ để chắc chắn gấp đôi,

140
00:07:54,750 --> 00:07:57,220
tôi sẽ đặt nó vào trong đó.

141
00:07:58,060 --> 00:08:00,830
Bởi vì chỉ có hai khả năng,

142
00:08:00,830 --> 00:08:02,750
hoặc đó là một nút tạm dừng hoặc một nút Play,

143
00:08:02,750 --> 00:08:06,530
nhưng chỉ

144
00:08:06,530 --> 00:08:10,010
để yên tâm của tôi, tôi sẽ đặt nó như một fa-play ở đó.

145
00:08:10,010 --> 00:08:12,950
Bây giờ bên trong đó, tôi sẽ thay đổi

146
00:08:12,950 --> 00:08:16,530
điều này từ tạm dừng sang chu kỳ.

147
00:08:16,530 --> 00:08:18,230
Bởi vì từ bài tập trước đó,

148
00:08:18,230 --> 00:08:19,700
bạn nhớ rằng nếu bạn muốn

149
00:08:19,700 --> 00:08:21,575
hành vi đi xe đạp để tiếp tục,

150
00:08:21,575 --> 00:08:29,205
bạn sẽ phải đặt hành động carousel là chu kỳ.

151
00:08:29,205 --> 00:08:33,840
Sau đó, tương tự, đối với hai câu lệnh còn lại,

152
00:08:33,840 --> 00:08:37,875
tôi sẽ loại bỏ PlayClass

153
00:08:37,875 --> 00:08:42,715
và sau đó thêm PauseClass.

154
00:08:42,715 --> 00:08:48,095
Vì vậy, lưu ý làm thế nào chúng ta đang sử dụng một chút

155
00:08:48,095 --> 00:08:52,310
mã jQuery tiên tiến

156
00:08:52,310 --> 00:08:56,854
để có thể tự động thay đổi biểu tượng nút,

157
00:08:56,854 --> 00:08:58,460
và đồng thời,

158
00:08:58,460 --> 00:09:03,140
gây ra hành vi đi xe đạp thích hợp trên băng chuyền của chúng tôi.

159
00:09:03,140 --> 00:09:05,760
Hãy xem trang web của chúng tôi,

160
00:09:05,760 --> 00:09:09,390
bây giờ bạn thấy rằng băng chuyền của tôi đang đi xe đạp,

161
00:09:09,390 --> 00:09:14,465
và bạn thấy rằng nút này hiện đang là một nút Tạm dừng.

162
00:09:14,465 --> 00:09:16,130
Khi tôi nhấp vào nút này,

163
00:09:16,130 --> 00:09:21,855
chú ý cách nó thay đổi từ Tạm dừng để một nút Play ở đó,

164
00:09:21,855 --> 00:09:23,865
và sau đó đồng thời,

165
00:09:23,865 --> 00:09:27,325
hành vi đi xe đạp của tôi của băng chuyền bị tạm dừng.

166
00:09:27,325 --> 00:09:28,840
Vì vậy, tại thời điểm này,

167
00:09:28,840 --> 00:09:31,460
băng chuyền của tôi sẽ vẫn tạm dừng tại

168
00:09:31,460 --> 00:09:34,700
vị trí đó cho đến khi tôi nhấp vào nút.

169
00:09:34,700 --> 00:09:36,950
Vì vậy, bây giờ, nếu tôi nhấp vào nút này

170
00:09:36,950 --> 00:09:40,130
một lần nữa, lưu ý sự thay đổi từ nút Phát thành nút Tạm dừng,

171
00:09:40,130 --> 00:09:42,320
và sau đó hành vi đi xe đạp

172
00:09:42,320 --> 00:09:44,795
của băng chuyền sẽ tiếp tục ngay tại chỗ.

173
00:09:44,795 --> 00:09:46,625
Vì vậy, sử dụng một nút duy nhất bây giờ,

174
00:09:46,625 --> 00:09:50,570
tôi có thể kiểm soát cả

175
00:09:50,570 --> 00:09:54,695
hành vi của băng chuyền và cũng đồng thời,

176
00:09:54,695 --> 00:09:57,125
hiển thị trạng thái hiện tại

177
00:09:57,125 --> 00:09:59,460
của hành vi đi xe đạp của tôi băng chuyền.

178
00:09:59,460 --> 00:10:00,740
Nếu đó là nút Tạm dừng,

179
00:10:00,740 --> 00:10:03,050
điều đó có nghĩa là băng chuyền của tôi hiện đang đi xe đạp.

180
00:10:03,050 --> 00:10:04,535
Nếu đó là một nút Play,

181
00:10:04,535 --> 00:10:06,560
sau đó băng chuyền của tôi bị tạm dừng.

182
00:10:06,560 --> 00:10:08,630
Vì vậy, để tiếp tục nó,

183
00:10:08,630 --> 00:10:10,175
tôi sẽ phải bấm vào nút.

184
00:10:10,175 --> 00:10:14,600
Vì vậy, đây là một thay đổi bổ sung

185
00:10:14,600 --> 00:10:17,120
mà bạn có thể làm cho bài tập.

186
00:10:17,120 --> 00:10:20,480
Vì vậy, bây giờ, bạn thấy

187
00:10:20,480 --> 00:10:24,629
làm thế nào trong mã của chúng tôi chúng tôi đã sử dụng các phương pháp hasClass,

188
00:10:24,629 --> 00:10:27,000
và chúng tôi cũng thấy việc sử dụng

189
00:10:27,000 --> 00:10:30,990
các phương pháp RemoveClass và addClass, các

190
00:10:30,990 --> 00:10:33,770
phương pháp jQuery mà chúng tôi áp dụng

191
00:10:33,770 --> 00:10:36,845
để thao tác DOM để

192
00:10:36,845 --> 00:10:39,545
phản ánh hành vi như

193
00:10:39,545 --> 00:10:43,445
phù hợp trong trường hợp cụ thể này.

194
00:10:43,445 --> 00:10:47,755
Với điều này, chúng tôi hoàn thành bài tập này.

195
00:10:47,755 --> 00:10:51,450
Đã đến lúc bạn thực hiện một cam kết Git với

196
00:10:51,450 --> 00:10:56,710
thông điệp thêm Bootstrap và jQuery.