把面向过程函数改写成面向对象函数,提高重用性,但是报错了
修改后的代码,封装后(报错)
<!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>
click里面的this和外面的this不一样