Đôi khi nhà phát triển phải biết ID của nút mà người dùng đã nhấp vào để quyết định hướng hành động tiếp theo trên trang web. Như bạn sẽ thấy trong phần viết này, điều này có thể được thực hiện thông qua cả JavaScript vani và jQuery. Vì vậy, hãy bắt đầu:
Đầu tiên, chúng tôi sẽ tạo một trang web HTML đơn giản có hai nút ở giữa trang:
DOCTYPE html >
< html >
< thân hình >
< trung tâm >
< div Phong cách = 'margin-top: 50px;' >
< h2 > Nhấp vào một trong các nút sau h2 >
< cái nút Tôi = 'button_one' Phong cách = 'width: 100px; height: 40px; margin-right: 10px;' > 1 cái nút >
< cái nút Tôi = 'button_two' Phong cách = 'width: 100px; height: 40px;' > hai cái nút >
div >
trung tâm >
thân hình >
html >
Làm thế nào để lấy ID của nút được nhấp bằng JavaScript?
Chúng tôi có thể lấy ID của nút được nhấp bằng JavaScript theo một số phương pháp khác nhau. Trong phương pháp đầu tiên của chúng tôi, chúng tôi sẽ lấy danh sách nút của tất cả các thẻ nút và lưu trữ chúng bên trong một biến. Sau đó, chúng tôi sẽ lặp lại danh sách nút để lấy ID của nút đã được nhấp:
< script >
var button = document.getElementsByTagName ( 'cái nút' ) ;
vì ( để cho chỉ số = 0 ; mục lục < các nút. độ dài; chỉ số ++ ) {
nút [ mục lục ] .onclick = hàm số ( ) {
báo động ( Id này ) ;
}
}
script >
Chúng tôi cũng có thể thiết lập từng nút với trong một cái nhấp chuột sự kiện riêng lẻ:
DOCTYPE html >
< html >
< thân hình >
< trung tâm >
< div Phong cách = 'margin-top: 50px;' >
< h2 > Nhấp vào một trong các nút sau h2 >
< cái nút Tôi = 'button_one' Phong cách = 'width: 100px; height: 40px; margin-right: 10px;' trong một cái nhấp chuột = 'alertId (this.id)' > 1 cái nút >
< cái nút Tôi = 'button_two' Phong cách = 'width: 100px; height: 40px;' trong một cái nhấp chuột = 'alertId (this.id)' > hai cái nút >
div >
trung tâm >
thân hình >
< script >
hàm số alertId ( Tôi ) {
báo động ( Tôi )
}
script >
html >
Làm thế nào để lấy ID của nút được nhấp bằng jQuery?
jQuery cũng có một số phương thức khác nhau có thể được sử dụng để lấy ID của một nút được nhấp. Chúng ta sẽ bắt đầu với nhấp chuột() phương thức được áp dụng trên bộ chọn và lấy tên hàm làm đối số tùy chọn:
DOCTYPE html >
< html >
< thân hình >
< trung tâm >
< div Phong cách = 'margin-top: 50px;' >
< h2 > Nhấp vào một trong các nút sau h2 >
< cái nút Tôi = 'button_one' Phong cách = 'width: 100px; height: 40px; margin-right: 10px;' trong một cái nhấp chuột = 'alertId (this.id)' > 1 cái nút >
< cái nút Tôi = 'button_two' Phong cách = 'width: 100px; height: 40px;' trong một cái nhấp chuột = 'alertId (this.id)' > hai cái nút >
div >
trung tâm >
thân hình >
< script >
$ ( 'cái nút' ) .nhấp chuột ( alertId ( $ ( đây ) .attr ( 'Tôi' ) ) ) ;
hàm số alertId ( Tôi ) {
báo động ( Tôi )
}
script >
html >
Chúng tôi cũng có thể sử dụng trên() phương thức để đính kèm các trình xử lý sự kiện vào các phần tử. Các trên() phương thức nhận ít nhất một sự kiện làm đối số cùng với một số đối số tùy chọn khác:
< html >
< thân hình >
< trung tâm >
< div Phong cách = 'margin-top: 50px;' >
< h2 > Nhấp vào một trong các nút sau h2 >
< cái nút Tôi = 'button_one' Phong cách = 'width: 100px; height: 40px; margin-right: 10px;' trong một cái nhấp chuột = 'alertId (this.id)' > 1 cái nút >
< cái nút Tôi = 'button_two' Phong cách = 'width: 100px; height: 40px;' trong một cái nhấp chuột = 'alertId (this.id)' > hai cái nút >
div >
trung tâm >
thân hình >
< script >
$ ( 'cái nút' ) .trên ( 'nhấp chuột' , alertId ( $ ( đây ) .attr ( 'Tôi' ) ) ) ;
hàm số alertId ( Tôi ) {
báo động ( Tôi )
}
script >
html >
Sự kết luận
ID của một nút được nhấp có thể được truy cập thông qua cả JavaScript và jQuery thuần túy. Chúng tôi đã thảo luận về bốn phương pháp như vậy và đưa ra chi tiết chuyên sâu và các ví dụ có liên quan trong bài viết này.