如何在重新加载时加载不同的div(按重复顺序)

Question

我在互联网上看到了这段代码:

$(function(){
    $(".various"+(new Date().getTime() % 3)).css("display", "block");
});

它会以随机顺序更改重新加载时可见的div.我只有一个问题,在我的情况下,这看起来非常不专业.所以我的问题是我怎么能让这不是随机的,但它首先显示div1,第二次重新加载div2,第三次重新加载div3而不是回到div1,我是一个非常淘气的javascript所以一个新的和平的javascript也很好

谢谢,清酒

Answer 1

如果您只想在加载页面时更改div(这意味着没有为div运行幻灯片,请更改html以隐藏/显示它们)

我可以考虑3种方法:

1)您可以尝试前一个答案(来自@Charlie)使用cookie来存储当前的div.

• 您可以尝试使用纯JavaScript来处理cookie,或者更好
• 既然你已经在使用jquery了解这个好帖子和jQuery的$ .cookie插件:http: //www.sitepoint.com/eat-those-cookies-with-jquery/

这有利于在旧浏览器中工作(jquery将负责交叉浏览)

更新使用带jQuery的cookie(jquery.cookie插件)

在你的jQuery添加jquery.cookie插件之后

<script src="jquery-1.9.1.js">  </script>
<script src="jquery.cookie.js"> </script>

假设我们/你有这个html div:

//Notice the divs are using a prefixed id with numeric ending
//(I think it's the best option)

<div id="mdiv1">
    <ul><li><a href="#" id="mlink"> hello 1 </a></li></ul>
</div>


<div id="mdiv2">
    <ul><li><a href="#" id="mlink"> hello 2</a></li></ul>
</div>


<div id="mdiv3">
    <ul><li><a href="#" id="mlink"> hello 3</a></li></ul>
</div>

这个jQuery代码:

<script>
$(document).ready(function(){

    //hide all divs just for the purpose of this example, 
    //you should have the divs hidden with your css

    $('#mdiv1').hide();
    $('#mdiv2').hide();
    $('#mdiv3').hide();
    //check if the cookie is already setted
    if ($.cookie("currentDiv")===undefined){
            $.cookie("currentDiv",1);
    }else{ //else..well 
            //get and increment value, let's suppse we have just 3 divs     

            var numValue = parseInt($.cookie("currentDiv"));
            numValue = numValue + 1;
            if (numValue>3){
            //restart to 1
                $.cookie("currentDiv",1);
            }
            else{ //no issues, assign the incremented value
                $.cookie("currentDiv",numValue.toString());
            }

            //show the div
            $('#mdiv'+$.cookie("currentDiv")).show();
    }
});
</script>

2)正如@Ra Mon所评论的那样,localStorage是另一个很好的选择(现代浏览器)来跟踪最后加载的div.

我认为它比cookies更优雅,但它的缺点是不能使用旧浏览器,当然你可以使用Modernizer进行检测并应用一些polyfill(使用cookie)来进行交叉浏览.

3)第三种方法(只要你不需要"动态"html)我想提一下使用服务器端会话(php/aspx)来跟踪加载/渲染的最后一个div并渲染下一个.如果不想使用基于内存的会话,即使你可以从服务器端处理cookie,缺点也就是丢失了缓存.

尝试使用更多和/或具体细节来更新您的问题,以便有人能够帮助您选择任何方法.

@RyanS我的意思是:

关于"动态"如果你只是在加载页面时更改div,那么就不需要使用clientSide脚本,这可以从服务器端实现.

关于"缓存",如果你要更改服务器端的页面/ html,网络服务器将不得不再次"提供"网页到WebBrowser/Client,因为它从上次查看时更改(丢失缓存,添加一些负载流量,带宽使用情况)<<<更好地说,如果浏览器确定页面自上次查看后已经发生变化(并且将会)将再次请求html /页面.