js-文字段落显解决方法-JavaSript-爱易网页

js-文字段落显解决方法

日期：2014-05-16　浏览次数：20396 次

js-文字段落显

HTML code


<!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>更多&gt;&gt;</a><a>收起&gt;&gt;</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语句中，只是改变的局部变量呢
还是怎么回事呢？

------解决方案--------------------
//查看更多
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;

免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。

js-文字段落显解决方法

相关资料更多>

推荐阅读更多>