Trong bài tập trước,
chúng ta đã thấy làm thế nào chúng ta có thể tận dụng
các điều khiển dựa trên JavaScript được cung cấp cho
các thành phần Bootstrap JavaScript
để kiểm soát hành vi của các thành phần.
Đặc biệt, chúng tôi đã thấy việc sử dụng băng chuyền và
làm thế nào chúng tôi đã có thể giới thiệu
hai nút để kiểm soát
hành vi đi xe đạp của băng chuyền.
Bây giờ, tôi không hoàn toàn hài lòng với việc thực hiện đó.
Tôi muốn bây giờ thu gọn toàn bộ điều
thành một nút duy nhất có thể
chỉ ra hành vi hiện tại
của băng chuyền và cũng có thể kiểm soát băng chuyền.
Vì vậy, chúng ta hãy xem làm thế nào chúng ta có thể tận dụng
thêm mã jQuery
để đạt được điều này, trong bài tập này.
Để đạt được điều đó, chúng tôi sẽ quay trở lại mã
trong index.html nơi chúng tôi xác định hai nút.
Tôi sẽ bây giờ loại bỏ div này cho
nhóm nút bởi vì chúng ta sẽ
chỉ có một nút duy nhất thay vì hai nút.
Vì vậy, tôi đã loại bỏ các div xung quanh hai nút.
Tôi cũng sẽ xóa một trong các nút,
bởi vì chúng tôi sẽ làm việc với
chỉ một nút duy nhất cho bài tập này.
Vì vậy, hãy để tôi thay đổi thụt lề.
Vì vậy, bây giờ, nút đặc biệt này mà chúng tôi có,
Tôi sẽ đổi tên nút này như CarouselButton.
Chúng tôi sẽ bắt đầu với nút này là
một nút có biểu tượng tạm dừng.
Chúng ta sẽ lật biểu tượng cho
nút này thông qua mã JavaScript.
Vậy làm thế nào để chúng ta làm điều đó?
Hãy xem trang web của chúng tôi,
bây giờ chúng ta sẽ thấy rằng chúng ta có một nút duy nhất ở đây,
mà hiện đang chỉ ra tạm dừng ở đó.
Bây giờ, hy vọng của tôi vào cuối bài tập này
là biến nút này thành
một điều khiển duy nhất theo đó nếu tôi nhấp vào nút này,
nó sẽ tạm dừng hành vi tuần hoàn của băng chuyền,
và sau đó đồng thời biến
nút này thành một nút chơi, có
nghĩa là biểu tượng này
sẽ được thay thế với biểu tượng phát.
Vì vậy, nút duy nhất này cho biết
trạng thái hiện tại
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 đó?
Chúng ta cần phải đi và chỉnh sửa
mã JavaScript để đạt được điều đó.
Đi xuống mã JavaScript
ở cuối trang index.html.
Vì vậy, ở đây, chúng tôi đã có kịch bản này mà chúng tôi đã
bao gồm trước đó
để kích hoạt hai nút ở đó.
Tôi sẽ chỉnh sửa mã này
để sử dụng nút duy nhất mà chúng tôi có ở đó.
Vì vậy, đến đây,
tôi sẽ loại bỏ
phần thứ hai này bởi vì chúng tôi
chỉ có một nút duy nhất bây giờ ở đây,
đó là CarouselButton,
và bất cứ khi nào đó được nhấp,
bạn cần phải làm một cái gì đó để đáp ứng với làm điều đó.
Vì vậy, nếu nút băng chuyền được
nhấp, sau đó bạn sẽ làm gì?
Bây giờ, may mắn thay, tùy thuộc vào
việc nút là nút Phát hay nút Tạm dừng,
chúng tôi sẽ có thể thực hiện một hành động thích hợp.
Nhưng làm thế nào để chúng ta biết liệu đó
là một nút Play hoặc một nút Tạm dừng?
Vì vậy, đây là nơi chúng ta sẽ sử dụng
một số mã jQuery để
xác định xem đây là một nút chơi hoặc một nút tạm dừng.
Để giúp chúng tôi xác định điều này,
chúng tôi sẽ đi vào trong đây và sau đó sử dụng một câu lệnh if
, và bên trong đó, tôi sẽ kiểm
tra xem đây là một nút chơi hay một nút tạm dừng.
Vì vậy, ở đây tôi nói,
CarouselButton.Children span.
Vì vậy, có nghĩa là,
đối với nút băng chuyền này,
bên trong nơi nếu có một phần tử với thẻ span,
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
tôi, chúng tôi đã có thẻ span
chứa biểu tượng Font Awesome ở đó.
Vì vậy, cho rằng thẻ span,
chúng ta sẽ kiểm tra HasClass.
Vì vậy, chúng tôi sẽ kiểm tra HasClass này,
và sau đó các lớp mà chúng tôi sẽ
kiểm tra là fa-pause.
Vì vậy, có nghĩa là,
nếu thẻ span có lớp fa-pause,
sau đó chúng ta biết rằng nút này
hiện đang hoạt động như nút tạm dừng.
Vì vậy, rõ ràng, khi nút được nhấp,
người dùng đang mong đợi rằng
hành vi tuần hoàn nên được tạm dừng.
Vì vậy, đó là những gì chúng tôi xác định ở đây.
Vì vậy, bây giờ bạn thấy rằng chúng tôi đang viết
một số mã JavaScript tiên tiến hơn bằng cách sử dụng
cú pháp jQuery để làm cho công việc này một cách chính xác.
Vậy ở trong này, tôi cần phải làm gì đây?
Bây giờ, do đó, có nghĩa
là nếu nút hiện đang là một nút Tạm dừng
, sau đó, rõ ràng khi nút được nhấp,
bạn muốn tạm dừng băng chuyền.
Sau đó, ngoài ra, chúng tôi muốn bây giờ có thể lật
biểu tượng đó từ biểu tượng tạm dừng sang biểu tượng chơi.
Vì vậy, những gì chúng tôi sẽ làm là,
chúng tôi sẽ nói ngay sau này,
chúng tôi sẽ nói $CarouselButton.Children span,
và sau đó chúng tôi sẽ nói, RemoveClass.
Vì vậy, chúng tôi sẽ loại bỏ các lớp tạm dừng.
Vì vậy, hãy chú ý làm thế nào nó hoạt động.
Chúng tôi sẽ loại bỏ các lớp tạm dừng từ đó,
và sau đó, chúng tôi sẽ thêm PlayClass.
Vì vậy, theo cách đó biểu tượng của nút của bạn bây giờ
sẽ được lật từ một nút Tạm dừng sang một nút Phát.
Vì vậy, chúng tôi sẽ loại bỏ PauseClass.
Tôi sẽ chỉ cần sao chép mã này và
sau đó dán nó ngay
ở đó và sau đó thực hiện chỉnh sửa mã này.
Điều tương tự, đối với CarouselButton cho khoảng trẻ em,
tôi sẽ thay vì bây giờ của RemoveClass,
tôi sẽ nói AddClass, và sau đó fa-play.
Vì vậy, theo cách đó, những gì chúng tôi đang làm là,
chúng tôi đang lật nút đó từ
một nút Tạm dừng để một nút Play.
Ngoài ra, chúng tôi đang tạm dừng
hành vi đi xe đạp của băng chuyền.
Bây giờ, nếu đây không phải là trường hợp sau đó,
nó phải là một nút Play để
hiệu ứng ngược lại nên được giới thiệu.
Sau đó, tôi sẽ chỉ đơn giản là sao chép mã này,
và sau đó làm các bài kiểm tra khác cho tình
huống mà nút là một PlayButton.
Vì vậy, tôi sẽ nói khác, bây giờ rõ ràng,
tôi không cần điều này nếu ở đây, nhưng chỉ để chắc chắn gấp đôi,
tôi sẽ đặt nó vào trong đó.
Bởi vì chỉ có hai khả năng,
hoặc đó là một nút tạm dừng hoặc một nút Play,
nhưng chỉ
để yên tâm của tôi, tôi sẽ đặt nó như một fa-play ở đó.
Bây giờ bên trong đó, tôi sẽ thay đổi
điều này từ tạm dừng sang chu kỳ.
Bởi vì từ bài tập trước đó,
bạn nhớ rằng nếu bạn muốn
hành vi đi xe đạp để tiếp tục,
bạn sẽ phải đặt hành động carousel là chu kỳ.
Sau đó, tương tự, đối với hai câu lệnh còn lại,
tôi sẽ loại bỏ PlayClass
và sau đó thêm PauseClass.
Vì vậy, lưu ý làm thế nào chúng ta đang sử dụng một chút
mã jQuery tiên tiến
để có thể tự động thay đổi biểu tượng nút,
và đồng thời,
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.
Hãy xem trang web của chúng tôi,
bây giờ bạn thấy rằng băng chuyền của tôi đang đi xe đạp,
và bạn thấy rằng nút này hiện đang là một nút Tạm dừng.
Khi tôi nhấp vào nút này,
chú ý cách nó thay đổi từ Tạm dừng để một nút Play ở đó,
và sau đó đồng thời,
hành vi đi xe đạp của tôi của băng chuyền bị tạm dừng.
Vì vậy, tại thời điểm này,
băng chuyền của tôi sẽ vẫn tạm dừng tại
vị trí đó cho đến khi tôi nhấp vào nút.
Vì vậy, bây giờ, nếu tôi nhấp vào nút này
một lần nữa, lưu ý sự thay đổi từ nút Phát thành nút Tạm dừng,
và sau đó hành vi đi xe đạp
của băng chuyền sẽ tiếp tục ngay tại chỗ.
Vì vậy, sử dụng một nút duy nhất bây giờ,
tôi có thể kiểm soát cả
hành vi của băng chuyền và cũng đồng thời,
hiển thị trạng thái hiện tại
của hành vi đi xe đạp của tôi băng chuyền.
Nếu đó là nút Tạm dừng,
điều đó có nghĩa là băng chuyền của tôi hiện đang đi xe đạp.
Nếu đó là một nút Play,
sau đó băng chuyền của tôi bị tạm dừng.
Vì vậy, để tiếp tục nó,
tôi sẽ phải bấm vào nút.
Vì vậy, đây là một thay đổi bổ sung
mà bạn có thể làm cho bài tập.
Vì vậy, bây giờ, bạn thấy
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,
và chúng tôi cũng thấy việc sử dụng
các phương pháp RemoveClass và addClass, các
phương pháp jQuery mà chúng tôi áp dụng
để thao tác DOM để
phản ánh hành vi như
phù hợp trong trường hợp cụ thể này.
Với điều này, chúng tôi hoàn thành bài tập này.
Đã đến lúc bạn thực hiện một cam kết Git với
thông điệp thêm Bootstrap và jQuery.