Trong trang HTML của bạn, bạn có thể có nhiều phần tử rất giống nhau nhưng mỗi phần tử lại độc đáo theo cách riêng của nó. Khi nhấp vào các phần tử như vậy, mỗi phần tử được cho là thực hiện một hành động khác nhau dựa trên giá trị Lớp hoặc Id của nó. Để đạt được điều này, mã của bạn phải có cách phát hiện tên lớp và/hoặc id của phần tử khi nó được nhấp vào [hoặc nếu được kích hoạt bởi một sự kiện khác]
Trong bài viết này, chúng tôi sẽ đề cập đến cách dễ dàng lấy ID hoặc Lớp của phần tử HTML được nhấp bằng jQuery
Chúng tôi sẽ chia hướng dẫn thành hai phần. Trước tiên, chúng tôi sẽ đề cập đến cách lấy Lớp, sau đó đề cập đến cách lấy ID
Cách lấy Lớp của phần tử được nhấp bằng jQuery
Có hai phương pháp khác nhau mà chúng ta có thể sử dụng
- Sử dụng . className thuộc tính jQuery
- Sử dụng hàm attr[] function
1. Sử dụng. className thuộc tính jQuery
Các. thuộc tính className nên được sử dụng cùng với sự kiện this hoặc . mục tiêu thuộc tính.
//Example 1: using event.target property
$[document].on["click", function[event]{
var clsname = event.target.className;
}];
//Example 2: using this property
$[document].on["click", function[]{
var clsname = this.className;
}];
ví dụ 1
Sử dụng. className kết hợp với sự kiện. target trên bất kỳ phần tử HTML nào trên trang
jQuery Get Class of Clicked Element
This is the page heading
This is a paragraph
Button 1
Button 2
Button 3
$[function[]{
$[document].on["click", function[event]{
alert[event.target.className];
}];
}];
Mã jQuery ở trên sẽ được kích hoạt khi nhấp vào bất kỳ phần tử nào trong trang. Khi nhấp vào một phần tử [ví dụ: tiêu đề, đoạn văn hoặc nút], lớp của nó được cảnh báo. Bạn cũng có thể gán nó cho một biến hoặc thực hiện một tác vụ nào đó dựa trên giá trị của lớp
Bạn có thể sử dụng một giá trị khác trong hàm [sự kiện] thay vì "sự kiện". Nếu bạn làm như vậy, thì bạn nên sử dụng giá trị đó để thay thế "sự kiện" trong sự kiện. Mục tiêu. tên lớp. Ví dụ: nếu bạn sử dụng hàm [xyz], bạn cũng nên sử dụng xyz. Mục tiêu. className để lấy tên lớp
Trong đoạn mã trên, nếu bạn nhấp vào một phần tử nhưng nó không có giá trị lớp, nó sẽ vẫn hiển thị hộp cảnh báo, nhưng không có giá trị cho lớp
ví dụ 2
Sử dụng. className kết hợp với thuộc tính này cho một loại phần tử HTML cụ thể trên trang
Để thực thi mã jQuery lấy tên lớp chỉ khi một phần tử của một loại cụ thể được nhấp vào, thì bạn phải thay đổi dòng $[document]. on["click", function[event]{ trong đoạn mã trên thành $["elementName"]. click[function[event]{ , trong đó "elementName" chỉ định tên của phần tử, ví dụ: h1, h2, button, p, v.v. Trong trường hợp của ví dụ này, nơi chúng tôi thay thế "sự kiện. target" với "this", bạn sẽ không cần phải có "sự kiện" [hoặc bất kỳ thứ gì] bên trong hàm[].
jQuery Get Class of Clicked Element
This is the page heading
This is a paragraph
Button 1
Button 2
Button 3
$[function[]{
$["button"].click[function[]{
alert[this.className];
}];
}];
Trong đoạn mã trên, một hộp cảnh báo chỉ được hiển thị với tên lớp khi nhấp vào nút. Mỗi nút có một lớp duy nhất, nhấp vào từng nút sẽ hiển thị hộp cảnh báo với lớp duy nhất cho nút đó
2. Sử dụng hàm attr[]
Hàm attr[] được sử dụng để lấy giá trị của thuộc tính đã chỉ định [ví dụ:. class, id, href, v.v.] trong phần tử được nhấp. Để lấy giá trị của lớp, chúng ta sử dụng thuộc tính "this" với hàm attr[], nơi chúng ta chuyển "class" cho hàm.
Điều này đề cập đến phần tử được nhấp. Không giống như ví dụ ở trên, chúng tôi sử dụng "this" dưới dạng $[this] vì attr[] là một hàm không giống như className ở trên.
Thí dụ
jQuery Get Class of Clicked Element
This is the page heading
This is a paragraph
Button 1
Button 2
Button 3
$[function[]{
$["button"].click[function[]{
alert[$[this].attr["class"]];
}];
}];
Cách lấy ID của phần tử được nhấp bằng jQuery
Theo cách tương tự để lấy tên lớp như đã trình bày ở trên bằng cách sử dụng các phương thức khác nhau, chúng ta có thể lấy giá trị của thuộc tính ID phần tử
ví dụ 1
Getting the IDs of clicked HTML elements
This is the page heading
This is a paragraph
Button 1
Button 2
Button 3
$[function[]{
$[document].on["click", function[event]{
alert[event.target.id];
}];
}];
Ghi chú. Trong khi đối với lớp, chúng tôi sử dụng thuộc tính className, để lấy ID, chúng tôi sử dụng id chứ không phải "idName"
ví dụ 2
Sử dụng cái này. id để lấy giá trị ID của các phần tử.
Getting the IDs of clicked HTML elements
This is the page heading
This is a paragraph
Button 1
Button 2
Button 3
$[function[]{
$["button"].click[function[]{
alert[this.id];
}];
}];
ví dụ 3
Sử dụng $[this]. Hàm attr[] để lấy giá trị ID của các phần tử.
Getting the IDs of clicked HTML elements
This is the page heading
This is a paragraph
Button 1
Button 2
Button 3
$[function[]{
$["button"].click[function[]{
alert[$[this].attr["id"]];
}];
}];
Phần kết luận
Có thể phát hiện và lấy giá trị ID hoặc Tên lớp của phần tử được nhấp trong trang HTML. jQuery cung cấp một cách dễ dàng và nhanh chóng để đạt được điều đó
Trong bài viết này, chúng tôi đã đề cập đến sự trợ giúp của nhiều ví dụ, các cách khác nhau mà bạn có thể lấy ID hoặc tên lớp của phần tử HTML được nhấp bằng cách sử dụng jQuery. Bạn có thể sao chép mã và thử chúng một mình