日期:2014-05-16  浏览次数:20393 次

JS控制多个相同id的div块的显示和隐藏,实现分页和每页显示个数效果

今天实现了JS控制多个相同id的div块的显示和隐藏,实现分页和可以选择每页显示件数的效果代码贴出来跟大家分享一下。
ASPX页面代码:

<select id="selCount" name="selCount" onchange ="showDivNum()">
<option value ="0">请选择</option>
<option value ="5">5件</option>
<option value ="10">10件</option>
<option value ="20">20件</option>
<option value ="30">30件</option>
<option value ="<%=Integer.MaxValue %>">全部显示</option>
</select>?
<div id="box" name="box"><div>
<div id="box" name="box"><div>?
<div id="box" name="box"><div>?
<div id="box" name="box"><div>?
<div id="box" name="box"><div>?
<div id="box" name="box"><div>?
......
<div id="pageCount"></div>???? <!--用于存放分页页数显示-->
如何所示的div块可以有很多个。
js脚本代码如下:

function showDivNum()
{
var count=document.getElementById('selCount').value ; //每页显示个数
var div_array=document.getElementsByName('B8-infoBox') ;//总件数???
for(var i=0;i<div_array.length;i++)
{
if(i<count)? //初始化显示所选择的件数
{
div_array[i].style.display = "block";
}
else
{
div_array[i].style.display = "none";
}
}
var index =Math.ceil(div_array.length /count ); //分页数,
Math.ceil向上取整 ?
var pageHTML="|";
for (var i=1;i<=index ;i++)
{
pageHTML +="<a href='javascript:changeShowDiv("+i+")'>"+i+"</a>|";
}
document.getElementById("pageCount").innerHTML =pageHTML.substring(0,pageHTML.length-1);

}

function changeShowDiv(cnt)
{
var count=document.getElementById('selCount').value ; //每页显示个数
var div_array=document.getElementsByName('B8-infoBox') ;//总件数
var m1=(cnt-1)*count;//根据选择要显示的第几页,算出起始项
var m2=cnt*count;//算出结束项
alert(m1);alert(m2);
for(var i=0;i<div_array.length;i++)
{
if(m1<=i&&i<m2)
{
div_array[i].style.display = "block";
}
else
{
div_array[i].style.display = "none";
}
}
}
</script>
由于时间有限,所以js代码没进行优化精简,有兴趣的朋友可以自己试试合并减短重复代码。

转载自http://hi.baidu.com/0521121059/blog/item/a9d35c1dbdb2738187d6b6a3.html