最近在寫一些前端頁面,遇到需要通過點擊事件獲取被點擊對象的文本內容,正確代碼如下:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Target</title>
</head>
<body>
<div id="tom">
TOmCat
</div>
</body>
<script>
$(document).ready(function() {
$('#tom').click(function(e) {
var strContent = $(e.currentTarget).text(); // 這裏要用.text()獲取文本內容
alert(strContent); // output: TOmCat
});
});
</script>
</html>
我一頓搜索(soso),發現還有人說可以用textContent熟悉來獲取,我試了一下,直接alert出來是undefined ,可見只能用.text()來獲取被點擊對象的文本內容。
然後 .textContent屬性一般用於某個具體的對象,舉例如下:
<!DOCTYPE html>
<html lang="en">
<head>
<script type="text/javascript" src="./js/jquery.min.js"></script>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Test Target</title>
</head>
<body>
<div id="tom">
TOmCat
<div class="tabs">
<div class="tab-item">
Item1
</div>
<div class="tab-item">
Item2
</div>
<div class="tab-item">
Item3
</div>
</div>
</div>
</body>
<script>
$(document).ready(function() {
var objectTabItems = $('#tom .tabs div.tab-item');
var num = objectTabItems.length;
for(var i = 0; i < num; i++) {
let strContent = objectTabItems[i].textContent;
alert("this click is:" + strContent);
}
});
</script>
</html>
可以看出來.textContent是在取到某個具體元素對象的時候使用。