此篇文章以綁定相同click事件的類別名稱為例
運用jQuery取得不同元件的id、name、class、value
開發環境
程式碼
Practice.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Practice</title>
<meta name="author" content="user" />
</head>
<body>
<input type="button" id="btn1" name="buttons" class="btns special-btn" value="Button 1">
<input type="button" id="btn2" name="buttons" class="btns" value="Button 2">
<input type="button" id="btn3" name="buttons" class="btns" value="Button 3">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
// 所有 class 為 btns 的元件都綁定此 click 事件
$(".btns").click(function() {
var id = $(this).attr("id"); // equals：this.id
var name = $(this).attr("name"); // equals: this.name
var theClass = $(this).attr("class"); // equals: this.className
var value = $(this).attr("value"); // equals: this.value // equals： $(this).val();
alert
(
"id = " + id + "\n" +
"name = " + name + "\n" +
"class = " + theClass + "\n" +
"value = " + value
);
});
// :button 意即 所有的(type="button") 且 class 名稱為 special-btn
$(":button.special-btn").click(function() {
alert('You clicked a special button');
});
});
</script>
</body>
</html>
執行結果:
如果這篇文章有幫助到你，想支持一下作者可以幫忙點擊側欄的「 Goolgle AdSense 」廣告 😄
如果你喜歡這篇文章可以點擊「分享」按鈕，來分享到你的網路社群
(以上文章內容如有謬誤，敬請不吝指教)