设计窝高端网站建设与制作
觉得不错,赏一个

觉得不错,赏一个

点击更多js的伪加载

设计窝2017-04-21例子源码 

<script type="text/javascript" src="https://cdn.staticfile.org/jquery/3.2.1/jquery.min.js"></script>

<div id="list" class="meitbd">

  <ul>

    <li> 我是一号 </li>

    <li> 我是二号 </li>

    <li> 我是三号 </li>

    <li> 我是四号 </li>

    <li> 我是五号 </li>

    <li> 我是六号 </li>

    <li> 我是一1号 </li>

    <li> 我是二2号 </li>

    <li> 我是三3号 </li>

    <li> 我是四4号 </li>

    <li> 我是五5号 </li>

    <li> 我是六6号 </li>

  </ul>

</div>

<a id="gengDuo">查看更多媒体报道</a>  

<script type="text/javascript">


//更多显示js

$(document).ready(function(){

var showDl = 6;//默认显示的条数

var addDl = 4;//每次点击增加的条数。如果点击后要加载全部,请写"all"

    var allDl = $("#list ul li").length;//全部信息条数

//jquery数组是从0开始累加,所以要减一

if(showDl>=1){

showDlNew = showDl-1;

}else{

showDlNew = 0;

}

//把默认显示行之外的行隐藏掉

if(showDl < allDl){

$("#list li:gt("+showDlNew+")").css("display","none").attr("name","none");

}

//以下为点击"更多"按钮触发的函数

$("#gengDuo").click(function(){

if(showDl >= allDl){

alert("一共只有"+allDl+"条信息");

}

var tiaoShu = $("#list li[name!='none']").length;//获取当前已经显示多少行了

if(tiaoShu >= allDl){

$("#list li:gt("+showDlNew+")").css("display","none").attr("name","none");//所有行显示后,再点击"更多"恢复之前状态

}else{

if(addDl == 'all'){

tiaoShu = allDl;//一下把所有剩下的信息都显示出来

}else{

tiaoShu = tiaoShu+addDl;//计算 增加显示N条信息后,应该显示多少行信息

}

//显示所有行信息

if(tiaoShu >= allDl){

tiaoShu = allDl;

}

//将需要显示的信息显示出来

$("#list li:lt("+tiaoShu+")").css("display","block").attr("name","block");

}

});

})

</script>


文章关键词
设计窝