<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// $(".wenben").click(function () {
// $(this).html(function(i,originTex){
// return (originTex+i);
// })
// })
//很奇怪,当点击元素"li"时总是在旧文本后追加下标0,与预期不一样。
//第一种情况触发事件的是当前触发点击事件的p元素,$(this)指向它,只有一个元素,所以其下标一直是0;
// 第二种情况如下;
$(document).click(function(){
$(".wenben").html(function(i,originTxt){
$(this).html(originTxt+i);
})
})
});
//第二种情况仅仅是通过document这个对象触发事件,进而执行的是一个典型的遍历赋值动作
</script>
</head>
<body>
<p class='wenben'>我是1号文本</p>
<p class='wenben'>我是2号文本</p>
<p class='wenben'>我是3号文本</p>
</body>
</html>
<html>
<head>
<meta charset="utf-8">
<script src="https://cdn.bootcss.com/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
// $(".wenben").click(function () {
// $(this).html(function(i,originTex){
// return (originTex+i);
// })
// })
//很奇怪,当点击元素"li"时总是在旧文本后追加下标0,与预期不一样。
//第一种情况触发事件的是当前触发点击事件的p元素,$(this)指向它,只有一个元素,所以其下标一直是0;
// 第二种情况如下;
$(document).click(function(){
$(".wenben").html(function(i,originTxt){
$(this).html(originTxt+i);
})
})
});
//第二种情况仅仅是通过document这个对象触发事件,进而执行的是一个典型的遍历赋值动作
</script>
</head>
<body>
<p class='wenben'>我是1号文本</p>
<p class='wenben'>我是2号文本</p>
<p class='wenben'>我是3号文本</p>
</body>
</html>