<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>JS特效-文字段落显示</title>
<style>
#comment{ margin:0px auto; width:500px;}
#comment div{ width:500px; border-bottom:1px solid #ccc; margin:0 0 10px 0; padding:10px 0;}
#comment p{ line-height:150%; font-size:12px; color:#0066CC; display:inline;}
#comment a{ font-size:12px; color:#999; line-height:150%; margin:0 0 0 10px;text-decoration:underline; display:none; cursor:pointer;}
#comment a:hover{text-decoration:none; }
</style>
<script>
function onclick(elementID){
var elementDiv= document.getElementById(elementID);
var elementP= elementDiv.getElementsByTagName('p');
for( i=0; i<elementP.length; i++){
change(i);
}
function change(i){
var elementHtml= elementP[i].innerHTML;//将elementHtml赋值给一个已经遍历出来的的p的元素
var elementLength= elementHtml.length;//提取elementHtml的长度
if( elementLength > 60){//判断长度是否大于六十
var moreBtn=elementP[i].nextSibling;//同级的下一个标签。这里应该是只的同级的字符。同级,就是把<a>遍历出来了。
var closeBtn=moreBtn.nextSibling;//就是把遍历<a>下一个出来了。
elementP[i].innerHTML=elementP[i].innerHTML.substr(0,60)+'...';// elementP[i].innerHTML,被重新赋值了,只当字符大于六十时候,只截取elementP[i]到60的位置,加上…这个些
moreBtn.style.display="inline";
//查看更多
moreBtn.onclick=function(){
elementP[i].innerHTML=elementHtml;
this.style.display="none";
closeBtn.style.display="inline";
return false;
}
//收起查看更多
closeBtn.onclick=function(){
elementP[i].innerHTML=(elementP[i].innerHTML.substr(0,60)+'...');
this.style.display="none";
moreBtn.style.display="inline-block";
return false;
}
}
}
}window.onload=function(){
onclick('comment');
}</script>
</head>
<body>
<div id="comment">
<div><p id="teshu">呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵恩呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵呵</p><a>更多>></a><a>收起>></a></div>
</div>
</body>
</html>21行
var elementHtml= elementP[i].innerHTML; 将elementHtml赋值给一个已经遍历出来的的p的元素
在26行
elementP[i].innerHTML=elementP[i].innerHTML.substr(0,60)+'...'; elementP[i].innerHTML发生改变为什么在30行
elementP[i].innerHTML=elementHtml;
elementHtml的值,没有随着elementP[i].innerHTML的值的改变而改变,是不是因为这里26行作用于if语句中,只是改变的局部变量呢
还是怎么回事呢?
解决方案 »
- 关于JS控制右下角弹窗的问题
- 如何在firefox下用js控制播放声音
- 求去掉HTML代码中空白段落的正则表达式
- 请教一个关于(c:forEach)标签问题
- javascript 怎样判断web控件输入的字符长度
- 不包含某字符串的正则表达式:^((?!test).)*$在ie5下不支持啊!
- 问个关于JQuery的小白问题。在eclipse中的JSP使用JQuery,下载的js放到哪个文件夹,JSP中如何引用?
- 如何在窗体中控制本身的大小?给你100芬
- Naola2001(摆地摊)新做的日历控件,挑战"meizz(梅花雪疏影横斜)".整合时间输入部分.哈哈,顺便送分.
- select 与 input的问题
- jQuery问题,请问如何用jQuery清除<table>表单中的所有行。
- 这是什么错误。惊讶!!我无能为力了。。
这里只是把elementHtml的值付给了elementP[i].innerHTML
elementP[i].innerHTML=elementP[i].innerHTML.substr(0,60)+'...'; elementP[i].innerHTML
这一行elementP[i].innerHTML的值已经改变了呢?可是为什么?
不影响
var elementHtml= elementP[i].innerHTML;
为什么 elementHtml的值 没有随着 elementP[i].innerHTML的改变 而改变。
elementP[i].innerHTML=elementP[i].innerHTML.substr(0,60)+'...'; elementP[i].innerHTML
这一行elementP[i].innerHTML的值已经改变了呢?可是为什么?
不影响
var elementHtml= elementP[i].innerHTML;
为什么 elementHtml的值 没有随着 elementP[i].innerHTML的改变 而改变。
moreBtn.onclick=function(){
elementP[i].innerHTML=elementHtml;
this.style.display="none";
closeBtn.style.display="inline";
return false;
}
//收起查看更多
closeBtn.onclick=function(){
elementP[i].innerHTML=(elementP[i].innerHTML.substr(0,60)+'...');
this.style.display="none";
moreBtn.style.display="inline-block";
return false;
}
楼主 点击更多时, elementP[i].innerHTML=elementHtml;
这个始终是用的 最初change执行时给elementHtml赋的最原始的elementP[i].innerHTML所以 和 点击收起 的elementP[i].innerHTML 不会冲突如果 你改成这样//查看更多
moreBtn.onclick=function(){
elementP[i].innerHTML=elementP[i].innerHTML;
this.style.display="none";
closeBtn.style.display="inline";
return false;
}就没效果了。