极客观点
项目管理
HarmonyOS
想要达到的效果：
1.文本超过80字符，截取前80个，并在后面加上"...显示更多"
2.点击“显示更多” 显示全部内容，并且结尾文字并成"收缩"
报错：VM1121:1 Uncaught SyntaxError: Unexpected token )
<!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>
<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").eq(i).click(function(){
if(onOff){
$(".text_content").eq(i).html($text);
$(".btn_more").eq(i).html("收缩");
onOff=false;
}
else{
$(".text_content").eq(i).html($part);
$(".btn_more").eq(i).html("...显示更多");
onOff=true;
}
})
}
})
</script>
</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>
<p ><span class="text_content">据工信部网站消息，工信部今天就《关于利用综合标准依</span><a href="javascript:void()" class="btn_more"></a></p>
<p ><span class="text_content">方被选元素及子元素上添加一个或多个事件处理程序。 自 jQuery 版本 1.7 起，on() 方法是 bind()、live() 和 delegate() 方法的新的替代品。该方法给 API 带来很多便利，我们推荐使用该方法，它简化了 jQuery 代码库</span><a href="javascript:void()" class="btn_more"></a></p>
</body>
</html>
1.
javascript:void()改为javascript:void(0)或者javascript:2.其他还有很大问题。比如多个显示更多引用的
$text;$part;i值都是同一个值。其中
i的问题可以通过闭包解决但是
$text，$part就要考虑一下了。可以使用es6let；可以在修改的时候重新获取；也可以把每个span的初始文本保存在span对象上，修改的时候再去读取。