Hôm nay mình sẽ giúp các bạn thực hành lấy id của một thành phần nào đó khi click chuột vào bằng JQuery
Các bạn có thể thực hành trên jsFiddle
Đầu tiên mình có file HTML với các thành phần là 4 ô với 4 ID khác nhau.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Hướng dẫn cách lấy Id của một thành phần sử dụng JQuery</title>
</head>
<body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script>
$('#boxes').bind('click', function(event) {
var current = jQuery(event.target).attr('id');
if (typeof current == typeof undefined && current == null)
current = jQuery(event.target).attr('class');
alert(current);
});
</script>
<style>
#boxes{
width: 200px;
height: 350px;
}
#box1{
width: 40px;
height: 35px;
background-color: red;
}
#box2{
width: 40px;
height: 35px;
background-color: yellow;
}
#box3{
width: 40px;
height: 35px;
background-color: blue;
}
#box4{
width: 60px;
height: 35px;
padding: 5px 10px 5px 10px;
background-color: green;
}
.childbox{
background-color: yellow;
padding: 2px;
}
</style>
<div id=boxes>
<div id=box1>box1</div>
<div id=box2>box2</div>
<div id=box3>box3</div>
<div id=box4><span class="childbox">Child of Box4</span></div>
</div>
</body>
</html>Đoạn javascript bên dưới sẽ giúp điều khiển hành động click chuột.
Ký tự $ được dùng để truy cập jQuery. Bạn có thể dùng chữ jQuery thay cho ký tự $ (đô la) đều được, ví dụ: var current = jQuery(event.target).attr(‘id’);
Quảng cáo
.bind() là phương thức giúp lấy ra một thành phần nào đó dựa trên một sự kiện, ở ví dụ dưới là sự kiện click chuột. Kể từ phiên bản jQuery 1.7 về sau, người ta khuyến khích sử dụng phương thức .on() linh hoạt hơn nhiều.
Thuộc tính event.target sẽ trả lại phần tử DOM đã kích hoạt sự kiện, do đó bạn có thể truy xuất bất kỳ thuộc tính nào của thành phần đó, ở đây ta sẽ dùng phương thức .attr() để lấy ra thuộc tính trong HTML, ở ví dụ dưới là lấy ra tên của id hoặc class
$('#boxes').bind('click', function(event) {
var current = $(event.target).attr('id');
if (typeof current == typeof undefined && current == null)
current = $(event.target).attr('class');
alert(current);
});
