把面向过程函数改写成面向对象函数，提高重用性，但是报错了
修改后的代码，封装后（报错）
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="description" content="">
<meta name="keywords" content="">
<title>字符串截取，收缩，显示更多</title>
<!-- <script type="text/javascript" src="jquery-1.10.1.min.js"></script> -->
<script src="http://libs.baidu.com/jquery/1.9.0/jquery.js"></script>
<style type="text/css">
p{
width: 600px;
background: #ddd;
padding:20px;
}
a{
text-decoration: none;
}
</style>
</head>
<body>
<p ><span class="text_content">方法在被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库</span><a href="javascript:void()" class="btn_more"></a></p>
<script>
function showMoreX(objTxt,objBtn,len){
this.objTxt=objTxt;
this.objBtn=objBtn;
this.len=len;
// 初始化变量
var $text=this.objTxt.html(); //原始数据；
var $part=$text.slice(0,this.len); //截取后的内容；
var onOff=true;
// 字符长度超过this.len就出现省略号和按扭；
if($text.length>this.len){
this.objTxt.html($part);
this.objBtn.html("...显示更多");
}
// 收缩点击判断
this.objBtn.click(function(){
if(onOff){
this.objTxt.html($text);
this.objBtn.html("收缩");
onOff=false;
}
else{
this.objTxt.html($part);
this.objBtn.html("...显示更多");
onOff=true;
}
})
}
showMoreX($(".text_content"),$(".btn_more"),80);
</script>
</body>
</html>
修改前的代码（可运行）
<script>
$(function(){
var num=$(".text_content").size();
var onOff=true;
for(i=0;i<num;i++){
// 初始化变量
var $text=$(".text_content").eq(i).html();
var $part=$text.slice(0,80);
var onOff=true;
// 字符长度超过80就出现省略号和按扭；
function addmore(){
if($text.length>80){
$(".text_content").eq(i).html($part);
$(".btn_more").eq(i).html("...显示更多");
}
}
addmore();
}
// 收缩点击判断
$(".btn_more").click(function(i){
if(onOff){
$(".text_content").html($text);
$(".btn_more").eq(i).html("收缩");
onOff=false;
}
else{
$(".text_content").html($part);
$(".btn_more").html("...显示更多");
onOff=true;
}
})
})
</script>
![[웹 프런트엔드] Node.js 빠른 시작](https://img.php.cn/upload/course/000/000/067/662b5d34ba7c0227.png)
click里面的this和外面的this不一样