jquery 翻页有关问题，请求高手解决

jquery 翻页问题，请求高手解决！



<ul>

	<li>第1页内容</li>

	<li>第2页内容</li>

	<li style="display:none">第3页内容</li><!--随机隐藏页,第2页至第N页都可能会出现-->

	<li>第4页内容</li>

	<li>第5页内容</li><!--随机隐藏页,第2页至第N页都可能会出现多个-->

	<li>第6页内容</li>

	<li>第7页内容</li>

	<li>第N页内容</li>

</ul>

<input name="" type="button" value="继续查看"/><!--最后一页不显示按钮-->

我想要的效果是每次只显示一个LI，点击【继续查看】按钮可以跳转到下一个LI，如果下一个LI是隐藏的就忽略(跳过)。
当跳到最后一个LI，按钮就隐藏。求高手帮助解决~谢谢。
------解决思路----------------------



<!DOCTYPE html>

<html xmlns="http://www.w3.org/1999/xhtml">

<head>

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

    <title></title>

    <script src="JS/jquery-1.7.2.js"></script>

    <script>

        $(function () {

            var num = $("li").length;

            var i = 0;

            var aArray = []

            $("li").each(function (index) {

                if ($(this).css("display") == "none")

                    aArray.push(index);

            });

            $("li").eq(i).css("display", "block");

            $("li").eq(i).siblings().css("display", "none");

            $("input[type=button]").click(function () {

                i++;

                $("li").css("display", "none");

                if ($.inArray(i, aArray) == -1) {

                    $("li").eq(i).css("display", "block");

                }

                else {

                    $("li").eq(i).css("display","none");

                }

                if (i == num) {

                    $("input[type=button]").hide();

                }

            });

        })

    </script>

</head>

<body>

    <ul>

        <li>第1页内容</li>

        <li>第2页内容</li>

        <li style="display: none">第3页内容</li>

        <!--随机隐藏页,第2页至第N页都可能会出现-->

        <li>第4页内容</li>

        <li style="display: none">第5页内容</li>

        <!--随机隐藏页,第2页至第N页都可能会出现多个-->

        <li>第6页内容</li>

        <li>第7页内容</li>

        <li>第N页内容</li>

    </ul>

    <input name="" type="button" value="继续查看" /><!--最后一页不显示按钮-->

</body>

</html>

------解决思路----------------------

<ul>

        <li>第1页内容</li>

        <li>第2页内容</li>

        <li style="display: none">第3页内容</li>

        <!--随机隐藏页,第2页至第N页都可能会出现-->

        <li>第4页内容</li>

        <li style="display: none">第5页内容</li>

        <!--随机隐藏页,第2页至第N页都可能会出现多个-->

        <li>第6页内容</li>

        <li>第7页内容</li>

        <li>第N页内容</li>

    </ul>

    <input id = "next" name="" type="button" value="继续查看" /><!--最后一页不显示按钮-->

$(function () {

    var ul = $("ul"),

		li = ul.find("li"),

		next = $("#next"),

		thisLi = null;


	li.filter(":visible").attr("data-visable","yes").not(":first").hide();

	thisLi = li.filter(":visible");


	next.on("click",function(){


		thisLi = thisLi.hide().nextAll("[data-visable=yes]:first");


		if(!thisLi.size()){

			next.hide();

		}else{

			thisLi.show();

		}

	});

});

------解决思路----------------------

$(function () {

    var ul = $("ul"),

        li = ul.find("li"),

        next = $("#next"),

        thisLi = null;

     

    li.filter(":visible").attr("data-visable","yes").not(":first").hide();

    thisLi = li.filter(":visible");

     

    next.on("click",function(){

        var nextLi = thisLi.nextAll("[data-visable=yes]");

		//先所有后面的li的集合获取到


		if(nextLi.size() == 1){

			//如果后面的集合中，li的个数只有一个，

			//就可以把按钮隐藏

			next.hide();

		}


        thisLi.hide();

		//把当前的li隐藏


        thisLi = nextLi.filter(":first").show();

		//然后重新定义thisLi。对应的li显示

    });

});

可以的，比如这样。

jquery 翻页有关问题，请求高手解决

相关推荐