求助 求助 求助 求助!!! 来个好心人 帮帮我 谢谢

原创 王振鹏 随笔 JS 267阅读 2017-11-22 16:37:33 举报

我写了个 分页器 但是 动态添加元素时,类名 添加不上啊!!!百度 好多 也没有这个问题啊!!!
文件:

求助 求助 求助 求助!!! 来个好心人 帮帮我 谢谢
<!DOCTYPE html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>分页</title>
<style>
body,ol,ul,h1,h2,h3,h4,h5,h6,p,th,td,dl,dd,form,fieldset,legend,input,textarea,select{
margin:0;padding:0
}
/html{
width:100%;
height: 100%;
}
/
body{
min-width: 1200px;
height: 100%;
font-size: 14px;
font:14px"微软雅黑","Arial Narrow";
}
a{
color:#2d374b;
text-decoration:none !important;
/transition: all 0.3s;/
}
/a:hover{
color:#cd0200;
text-decoration:underline;
}
/
em{
font-style:normal
}
li{
list-style:none
}
img{
border:0;
vertical-align:middle
}
table{
border-collapse:collapse;
border-spacing:0
}
/分页器/

Page_Box{

        width: 1200px;
        margin: 0 auto;
        margin-bottom: 20px;
        overflow: hidden;
        padding-left: 1px;
    }
    #Page_Box span{
        display: inline-block;
        padding: 0 15px;
        height: 30px;
        border: 1px solid #e2e2e2;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        margin-left: -1px;
        float: left;
        -webkit-transition: all 0.3s;
        transition: all 0.3s;
        cursor: pointer;
    }
    #Page_Box span:hover{
        color: #F27272;
    }
    /*样式初始化*/
    #Page_Box span.Invalid{
        cursor: initial;
    }
    #Page_Box span.Invalid:hover{
        color: #000;
    }
    #Page_Box span.Page{
        cursor: initial;
        color: #e2e2e2;
    }
    #Page_Box span.Page_Show{
        display: none;
    }
    #Page_Box ul{
        /*margin-left: 50%;*/
        height: 32px;
        float: left;
    }
    #Page_Box ul li{
        border: 1px solid #e2e2e2;
        padding: 0 15px;
        height: 30px;
        float: left;
        font-size: 14px;
        text-align: center;
        line-height: 30px;
        margin-left: -1px;
        cursor: pointer;
        -webkit-transition: all 0.3s;
        transition: all 0.3s; 
    }
    #Page_Box ul li:hover{
        color: #F27272;
    }
    #Page_Box ul li.Page_Click{
        background: #F27272;
        color: #fff;
        border: 1px solid #F27272;
    }

</style>

</head>
<body>
<div id="Page_Box">
<span class="Previous_Page Page">上一页</span>
<span class="Home_Page Page_Show">首页</span>
<span class="Invalid Page_Show">...</span>
<ul id="Page_List">
<!--<li class="Page_Click" data-page = "1">1</li>
<li data-page = "2">2</li>
<li data-page = "3">3</li>
<li data-page = "4">4</li>
<li data-page = "5">5</li>
-->
</ul>
<span class="Invalid">...</span>
<span class="Shadowe">尾页</span>
<span class="Lower_Page">下一页</span>
</div>
</body>
<script type="text/javascript" src="js/jQ.js" ></script>
<script>
//分页器
var Data_Num = 300 //数据条数
var pageSize = 30;//每页显示数据数量
var totalPage = Math.ceil(Data_Num/pageSize);//总页数
function _Page(num){
//num 是页数
//字符串初始化
var str = "";
//初始化上一页
$(".Previous_Page").attr("class","Previous_Page Page");
if(num == 0){
$("#Page_Box").css("display","none");
alert("程序员小哥,正在努力添加数据哦!!!")
//一条数据
}else if( num >= 1 && num < 2){
$(".Invalid").attr("class","Invalid Page_Show");
$(".Home_Page").attr("class","Home_Page Page_Show");
$(".Shadowe").attr("class","Shadowe Page_Show");
$(".Previous_Page").attr("class","Previous_Page Page");
$(".Lower_Page").attr("class","Lower_Page Page");
str += "<li data-page = 1>1</li>";
//2-5页 初始化
}else if(num >= 2 && num <= 5){
//首页 尾页 ... 不显示
$(".Invalid").attr("class","Invalid Page_Show");
$(".Home_Page").attr("class","Home_Page Page_Show");
$(".Shadowe").attr("class","Shadowe Page_Show");
//动态生成 li 序列号
for (var i = 1; i <= num;i++ ){
str += "<li data-page = " + i + ">"+ i +"</li>";
}
//数据大于5页初始化
}else if(num > 5){
$(".Invalid").eq(0).attr("class","Invalid Page_Show");
$(".Invalid").eq(1).removeClass("Page_Show");
$(".Shadowe").removeClass("Page_Show");
//动态生成 li 序列号
for (var i = 1; i <= 5;i++ ){
str += "<li data-page = " + i + ">"+ i +"</li>";
}
}else{
alert("对不起,数据出错!")
}
//初始化
$("#Page_List").html(str);
$("#Page_List").find("li").eq(0).attr("class","Page_Click");

        //事件
        $("#Page_List").on("click","li",function(){               
            //上一页
            if($(this).attr("data-page") > 1){
                $(".Previous_Page").removeClass("Page");
            }else if($(this).attr("data-page") <= 3) {
                $(".Previous_Page").attr("class","Previous_Page Page");
            }
            //下一页
            if($(this).attr("data-page") == num){
                $(".Lower_Page").attr("class","Lower_Page Page");
            }else{
                $(".Lower_Page").removeClass("Page");
            }

// //大于5 页时候
if(num > 5){
str = "";
//生成li y元素
if($(this).attr("data-page")<= 3){
for (var i = 1; i <= 5;i++ ){
str += "<li data-page = " + i + ">"+ i +"</li>";
}
}else{
if(num - $(this).attr("data-page")>=2){
for (var i = 0; i < 5;i++) {
j = $(this).attr("data-page")-2+i
str += "<li data-page = " + j + ">"+ j +"</li>";
}
}else{
for (var i = 1; i <= 5;i++) {
j = num-5+i
str += "<li data-page = " + j + ">"+ j +"</li>";
}
}
}
$("#Page_List").html(str);
}
// 问题在这??
// 我 用字符串 拼接 元素 但是 下面的代码 不好使了!!! 是不是因为我 改变了 DOM ?? 怎么解决啊?? 谢谢
//点击样式
$(this).attr("class","Page_Click").siblings("li").removeClass("Page_Click");
})
}
_Page(21);
</script>
</html>

评论 ( 8 )
最新评论
大神M 7F 2017-11-22 21:52:54 8F

客气~

王振鹏 2F 2017-11-22 18:14:20 7F

完美 谢谢

王振鹏 3F 2017-11-22 18:14:03 6F

6666 谢谢

王振鹏 3F 2017-11-22 18:10:03 5F

可以 谢谢 谢谢

王振鹏 2F 2017-11-22 18:07:10 4F

哦哦哦 对啊 谢谢

lzh2740128806 2017-11-22 17:01:57 3F

你点击的元素都没了怎么能加的上,把这块儿换一下看是不是你想的效果
html 代码

大神M 2017-11-22 17:01:47 2F

试试addclass

王振鹏 2017-11-22 16:38:32 1F

谢谢