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
عناصر التحكم المستندة إلى جافا سكريبت التي يتم توفيرها

4
00:00:11,820 --> 00:00:14,820
لمكونات جافا سكريبت Bootstrap

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
لهذا الزر من خلال شفرة جافا سكريبت.

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
شفرة جافا سكريبت من أجل تحقيق ذلك.

51
00:02:38,010 --> 00:02:41,240
الانتقال إلى شفرة جافا سكريبت

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
وهو كاروسيلبوتون،

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
كاروسيلبوتون. الأطفال تمتد.

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
داخل حيث إذا كان هناك عنصر مع علامة الامتداد،

84
00:04:19,380 --> 00:04:22,790
لذلك نحن نعرف بوضوح أنه في زر دائري لدينا،

85
00:04:22,790 --> 00:04:24,620
كان لدينا علامة الامتداد التي

86
00:04:24,620 --> 00:04:28,910
تحتوي على رمز الخط رهيبة هناك.

87
00:04:28,910 --> 00:04:31,025
لذلك بالنسبة لعلامة الامتداد هذه،

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
إذا كانت علامة الامتداد تحتوي على فئة 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
بعض التعليمات البرمجية جافا سكريبت أكثر تقدما باستخدام

102
00:05:15,260 --> 00:05:19,775
بناء جملة مسج من أجل جعل هذا العمل بشكل صحيح.

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. الأطفال تمتد،

113
00:06:11,175 --> 00:06:15,330
وبعد ذلك سوف نقول، ريموفيكلاس.

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
لذلك نحن ذاهبون لإزالة بوسيكلاس.

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
وأنا ذاهب إلى بدلا من ريموفيكلاس،

126
00:06:58,855 --> 00:07:03,355
وأود أن أقول أدكلاس، ومن ثم فا اللعب.

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
يجب أن يكون زر التشغيل بحيث

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
أنا ذاهب لوضع ذلك باعتباره فا اللعب هناك.

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
حان الوقت بالنسبة لك للقيام جيت الالتزام مع

196
00:10:51,450 --> 00:10:56,710
الرسالة أكثر بوتستراب و مسج.