Onclick thay đổi giá trị biến javascript
Các biến CSS gần như là tiêu chuẩn vàng trong việc xây dựng các thiết kế từ đầu, điều này đã được khuếch đại hơn nữa bằng cách tích hợp các biến như một phần của các thư viện và khung CSS phổ biến Show
Vì vậy, đoạn mã sau đây thực sự là về việc sử dụng 4 - chọn kiểu đã chỉ định, truy vấn biến và sau đó thay đổi giá trị dựa trên 5CSSHTMLJavaScript
Mảnh ghép cuối cùng là tuyên bố 6. Điều này cho phép chúng tôi truy vấn trực tiếp biến trong đó dữ liệu biến được lưu trữ. Đáng lưu ý rằng phương pháp này hoạt động với bất kỳ thuộc tính/phần tử CSS nào, do đó không chỉ giới hạn ở các Biến CSSĐây là tiêu đề cho bản demo của chúng tôiĐây là một số văn bản Và một số văn bản khác Nhấp vào tôi để thay đổi màu văn bản Phương pháp này sau đó có thể được thực hiện trong một số lượng lớn các trường hợp sử dụng. Ví dụ: bạn có thể tạo một tiện ích tùy chỉnh để cho phép người dùng thay đổi kích thước phông chữ của nội dung cơ thể của bạn. Ngoài ra, phương pháp này có thể được sử dụng để áp dụng các bộ lọc khác nhau cho hình ảnh và cho phép người dùng xem trước các kết quả khác nhau Tôi muốn thay đổi một biến trong hộp kiểm khiến câu lệnh if tính toán mà không cần tải lại trang, nhưng tôi đang gặp khó khăn.. vẫn đang học, xin lỗi Đây là mã có liên quan
Cảm ơn Giải pháp tốt nhất
Đầu tiên, bạn muốn sự kiện 3, được gọi khi trạng thái của hộp kiểm thay đổi. 4 trả về giá trị boolean (đúng hoặc sai) tùy thuộc vào trạng thái đó. Thứ hai, câu lệnh 5 chỉ được xử lý một lần, khi trang tải tập lệnh đó. Đặt nó trong một chức năng để gọi nó một lần nữaGiải pháp liên quanJavascript – Cách đóng JavaScript hoạt độngMột đóng cửa là một cặp của
Môi trường từ vựng là một phần của mọi ngữ cảnh thực thi (khung ngăn xếp) và là bản đồ giữa các mã định danh (nghĩa là. tên biến cục bộ) và giá trị Mỗi chức năng trong JavaScript duy trì một tham chiếu đến môi trường từ vựng bên ngoài của nó. Tham chiếu này được sử dụng để định cấu hình ngữ cảnh thực thi được tạo khi một hàm được gọi. Tham chiếu này cho phép mã bên trong hàm "nhìn thấy" các biến được khai báo bên ngoài hàm, bất kể khi nào và ở đâu hàm được gọi Nếu một chức năng được gọi bởi một chức năng, đến lượt nó được gọi bởi một chức năng khác, thì một chuỗi tham chiếu đến môi trường từ vựng bên ngoài được tạo. Chuỗi này được gọi là chuỗi phạm vi Trong đoạn mã sau, 6 tạo thành một bao đóng với môi trường từ vựng của bối cảnh thực thi được tạo khi gọi 7, đóng trên biến 8
Nói cách khác. trong JavaScript, các hàm mang tham chiếu đến một "hộp trạng thái" riêng tư mà chỉ chúng (và bất kỳ hàm nào khác được khai báo trong cùng một môi trường từ vựng) mới có quyền truy cập. Hộp trạng thái này là vô hình đối với người gọi hàm, cung cấp một cơ chế tuyệt vời để ẩn và đóng gói dữ liệu Và hãy nhớ. các hàm trong JavaScript có thể được truyền xung quanh giống như các biến (hàm hạng nhất), nghĩa là các cặp chức năng và trạng thái này có thể được truyền xung quanh chương trình của bạn. tương tự như cách bạn có thể truyền một thể hiện của một lớp xung quanh trong C++ Nếu JavaScript không có bao đóng, thì sẽ phải chuyển nhiều trạng thái hơn giữa các hàm một cách rõ ràng, làm cho danh sách tham số dài hơn và mã ồn hơn Vì vậy, nếu bạn muốn một chức năng luôn có quyền truy cập vào một phần trạng thái riêng tư, bạn có thể sử dụng bao đóng và chúng ta thường muốn liên kết trạng thái với một chức năng. Ví dụ, trong Java hoặc C++, khi bạn thêm một biến thể hiện riêng và một phương thức vào một lớp, bạn đang liên kết trạng thái với chức năng Trong C và hầu hết các ngôn ngữ phổ biến khác, sau khi hàm trả về, tất cả các biến cục bộ không còn truy cập được nữa do khung ngăn xếp bị hủy. Trong JavaScript, nếu bạn khai báo một hàm bên trong một hàm khác, thì các biến cục bộ của hàm bên ngoài vẫn có thể truy cập được sau khi trở về từ hàm đó. Bằng cách này, trong đoạn mã trên, 8 vẫn có sẵn cho đối tượng hàm 6, sau khi nó được trả về từ 7Công dụng của Đóng cửaCác bao đóng hữu ích bất cứ khi nào bạn cần một trạng thái riêng tư được liên kết với một chức năng. Đây là một kịch bản rất phổ biến - và hãy nhớ. JavaScript không có cú pháp lớp cho đến năm 2015 và nó vẫn không có cú pháp trường riêng. Đóng cửa đáp ứng nhu cầu này Biến thể hiện cá nhânTrong đoạn mã sau, hàm 52 đóng trên các chi tiết của ô tô 5Lập trình chức năngTrong đoạn mã sau, hàm 6 đóng trên cả 54 và 55 0Lập trình hướng sự kiệnTrong đoạn mã sau, hàm 56 đóng trên biến 57 3____24mô đun hóaTrong ví dụ sau, tất cả các chi tiết triển khai được ẩn bên trong một biểu thức hàm được thực thi ngay lập tức. Các chức năng 58 và 52 đóng trên trạng thái tư nhân và các chức năng họ cần để hoàn thành công việc của mình. Việc đóng cửa đã cho phép chúng tôi mô đun hóa và đóng gói mã của chúng tôi 7ví dụví dụ 1Ví dụ này cho thấy các biến cục bộ không được sao chép trong bao đóng. việc đóng cửa duy trì một tham chiếu đến chính các biến ban đầu. Như thể khung ngăn xếp vẫn tồn tại trong bộ nhớ ngay cả sau khi chức năng bên ngoài thoát 8ví dụ 2Trong đoạn mã sau, ba phương thức 00, 01 và 02 đều đóng trên cùng một môi trường từ vựngVà mỗi khi 03 được gọi, một bối cảnh thực thi mới (khung ngăn xếp) được tạo và một biến hoàn toàn mới 04 và một bộ hàm mới ( 00, v.v. ) được tạo, đóng trên biến mới này 5ví dụ 3Nếu bạn đang sử dụng các biến được khai báo bằng cách sử dụng 06, hãy cẩn thận để biết bạn đang đóng biến nào. Các biến được khai báo bằng cách sử dụng 06 được nâng lên. Đây là một vấn đề ít hơn nhiều trong JavaScript hiện đại do sự ra đời của 08 và 09Trong đoạn mã sau, mỗi lần lặp lại, một hàm mới 6 được tạo, hàm này sẽ đóng trên 31. Nhưng vì 32 được treo bên ngoài vòng lặp, tất cả các hàm bên trong này đóng trên cùng một biến, nghĩa là giá trị cuối cùng của 31 (3) được in ba lần 0điểm cuối cùng
liên kết
Javascript – Cách thay đổi lớp của phần tử bằng JavaScriptKỹ thuật HTML5 hiện đại để thay đổi lớpCác trình duyệt hiện đại đã thêm classList cung cấp các phương thức giúp thao tác với các lớp dễ dàng hơn mà không cần thư viện 1Thật không may, những thứ này không hoạt động trong Internet Explorer trước v10, mặc dù có một miếng đệm để thêm hỗ trợ cho IE8 và IE9, có sẵn từ trang này. Tuy nhiên, nó ngày càng nhiều Giải pháp đa trình duyệt đơn giảnCách JavaScript tiêu chuẩn để chọn một phần tử là sử dụng 39, đây là cách mà các ví dụ sau sử dụng - tất nhiên bạn có thể lấy các phần tử theo những cách khác và trong tình huống phù hợp, có thể chỉ cần sử dụng 40 thay thế - tuy nhiên, việc đi sâu vào chi tiết về điều này là không thể Để thay đổi tất cả các lớp cho một phần tửĐể thay thế tất cả các lớp hiện có bằng một hoặc nhiều lớp mới, hãy đặt thuộc tính className 2(Bạn có thể sử dụng danh sách được phân cách bằng dấu cách để áp dụng nhiều lớp. ) Để thêm một lớp bổ sung vào một phần tửĐể thêm một lớp vào một phần tử mà không xóa/ảnh hưởng đến các giá trị hiện có, hãy thêm một khoảng trắng và tên lớp mới, như vậy 3Để xóa một lớp khỏi một phần tửĐể xóa một lớp đơn lẻ thành một phần tử mà không ảnh hưởng đến các lớp tiềm năng khác, cần phải thay thế biểu thức chính quy đơn giản 4Một lời giải thích của regex này là như sau 5Cờ 41 yêu cầu thay thế lặp lại theo yêu cầu, trong trường hợp tên lớp đã được thêm nhiều lầnĐể kiểm tra xem một lớp đã được áp dụng cho một phần tử chưaBiểu thức chính được sử dụng ở trên để xóa một lớp cũng có thể được sử dụng để kiểm tra xem một lớp cụ thể có tồn tại hay không 6### Chỉ định những hành động này cho sự kiện onclick. Mặc dù có thể viết JavaScript trực tiếp bên trong các thuộc tính sự kiện HTML (chẳng hạn như 42), đây không phải là hành vi được khuyến nghị. Đặc biệt trên các ứng dụng lớn hơn, mã dễ bảo trì hơn đạt được bằng cách tách phần đánh dấu HTML khỏi logic tương tác JavaScriptBước đầu tiên để đạt được điều này là tạo một hàm và gọi hàm đó trong thuộc tính onclick chẳng hạn 7(Không bắt buộc phải có mã này trong thẻ tập lệnh, đây chỉ đơn giản là ví dụ ngắn gọn và bao gồm JavaScript trong một tệp riêng biệt có thể phù hợp hơn. ) Bước thứ hai là di chuyển sự kiện onclick ra khỏi HTML và chuyển sang JavaScript, chẳng hạn như sử dụng addEventListener 8(Lưu ý rằng cửa sổ. phần onload là bắt buộc để nội dung của hàm đó được thực thi sau khi HTML tải xong - nếu không có phần này, MyElement có thể không tồn tại khi mã JavaScript được gọi, do đó dòng đó sẽ bị lỗi. ) Thư viện và khung JavaScriptĐoạn mã trên đều ở dạng JavaScript chuẩn, tuy nhiên, thông thường người ta sử dụng khung hoặc thư viện để đơn giản hóa các tác vụ thông thường, cũng như hưởng lợi từ các lỗi đã sửa và các trường hợp cạnh mà bạn có thể không nghĩ đến khi viết mã của mình Mặc dù một số người cho rằng việc thêm khung ~50 KB chỉ để thay đổi một lớp là quá mức cần thiết, nhưng nếu bạn đang thực hiện bất kỳ khối lượng đáng kể nào đối với JavaScript hoặc bất kỳ thứ gì có thể có hành vi bất thường trên nhiều trình duyệt, thì bạn nên cân nhắc (Đại khái, thư viện là một bộ công cụ được thiết kế cho một nhiệm vụ cụ thể, trong khi một khung thường chứa nhiều thư viện và thực hiện một bộ nhiệm vụ hoàn chỉnh. ) Các ví dụ trên đã được sao chép bên dưới bằng cách sử dụng jQuery, có lẽ là thư viện JavaScript được sử dụng phổ biến nhất (mặc dù cũng có những ví dụ khác đáng để nghiên cứu) (Lưu ý rằng 43 ở đây là đối tượng jQuery. )Thay đổi lớp học với jQuery 9Ngoài ra, jQuery cung cấp lối tắt để thêm một lớp nếu nó không áp dụng hoặc xóa một lớp không áp dụng. |