Bài tập javascript 4 – Viết hiệu ứng tương tác như facebook phần 2

bài tập javascript 4 này, chúng ta sẽ tiếp tục tạo hiệu ứng tương tác như facebook bằng javascript phần 2. Bài tập này tương đối khó. Tất nhiên khi xem lần đầu các bạn sẽ hơi thấy khó hiểu nhưng mình đã có cách giải quyết đó là  bạn cứ đọc tiếp những bài tập sau của mình, okê mình tiến hành luôn 😀

bài tập javascript 4

Kiến thức cần có:

  1. Biến
  2. Câu lệnh if else
  3. Vòng lặp for
  4. Mảng
  5. Hàm
  6. Event
  7. HTML DOM

Bài tập javascript 4: Tạo hiệu ứng tương tác như facebook phần 2

Mô tả bài tập: Click 1 lần vào icon nội dung bung ra , click lần nữa nội dung ẩn đi .Mình sẽ code và giải thích chi tiết ngay phía sau. Tương tự bài trước thôi nhưng cái khác ở bài tập này là ta làm một được mà được nhiều, muốn làm một được nhiều thì các bạn chắc hẳn đã mường tượng phải dùng vòng lặp đúng không :D.

Demo:

Click vào bài tập js 4 để xem kết quả

Mình sẽ code và giải thích chi tiết ở ngay phía sau.

Code: html

Code: CSS

Kết quả:

bài tập javascript 4

Lưu ý là khối noidung sẽ ẩn đi  vì mình để opacity: 0 và visibility: hidden  trong bài trước mình để display: none mỗi bài mỗi cách cho nó khác bọt. Bây giờ chúng ta cần code js để khi click vào sẽ hiện khối noidung ra, click lần nữa thì nội dung ẩn đi.

Code: Js

File js :

  • Khởi tạo biến “icon” để truy xuất phần tử icon ở đây mình sử dụng phương thức querySelectorAll để truy xuất
  • Khởi tạo biến “noidung” để truy xuất phần tử div có class = “noidung”
  • Dùng vòng lặp for để truy xuất tất cả các icon tức là khi bạn click vào một icon bất kì nó sẽ lấy được icon ấy
  • Tạo sự kiện onclick cho icon bằng function anonymous
  • Trong function anonymous mình thực hiện lệnh if  else có ý nghĩa : mà thôi mình giải thích cái này ở bài trước rồi còn gì, tương tự thôi 😀
  • this.classList[1] == 'mautrang' chính là kiểm tra xem phần tử này đã tồn tại class ‘mautrang’ hay chưa nếu có sẽ remove nó đi
  • var ndhienra = this.getAttribute('data-hienlen'); var phantuhienra= document.getElementById(ndhienra);  tiếp tục trong khối lệnh if. Chúng ta sẽ thực hiện các lệnh này để truy xuất các phần tử của class ‘noidung’. Ta sẽ đặt thuộc tính của data-hienlen trong thẻ icon trùng với ID của các khối noidung. Khi click vào icon thì lấy được Attribute của từng thằng data-hienlen. Vì ta đặt cái Attribute của thằng icon trùng với ID từng thằng noidung. Nên ta sẽ lấy được đồng thời ID của từng thằng noidung bằng getElementById.  Lấy được nó rồi thì remove đi
  • Các câu lệnh trong khối lệnh if nhằm khi ta click vào 1 lần nd hiện ra khi click tiếp tục lần nữa nó sẻ bỏ đi.
  • Chúng ta nên thực hiện các câu lệnh trong khối lệnh else trước rồi sau đó mới xử lý khối lệnh if else

Okê vậy là xong bài tập javascript 4 nha. Nếu có thắc mắc gì thì các bạn cứ để comment lại ở dưới mình sẽ giải quyết hết :D. Mình xin nhắc lại là bài tập này tương đối khó tí. Nếu chưa làm liền được thì k sao, những bài tập sau còn dễ hơn nhiều :D. Tuy nhiên thì mình nghĩ nên giới thiệu bài tập này trước. Mình xin được kết thúc bài viết này tại đây.

 

Xem bài viết tiếp theo tại đây.

 

avatar
  Subscribe  
newest oldest most voted
Notify of
nguyễn an
Guest
nguyễn an

this.classList[1] == ‘mautrang’ . Cho e hỏi là tại sao trong khung [] lại để số 1 mà không phải là i vậy a ? Em cảm ơn

Trần văn sỷ
Guest
Trần văn sỷ

nút trái phải có ý nghĩa gì vậy anh, trong khi nó chuyển không theo thứ tự lùi-tiến