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

Question

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

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

它以随机顺序更改重新加载时可见的 div。我只有一个问题，就我而言，这看起来非常不专业。所以我的问题是我怎样才能使它不是随机的，但它首先显示div1，第二次重新加载div2，第三次重新加载div3，然后返回div1，我在javascript中是一个相当菜鸟，所以一个新的javascript和平也很好

谢谢，清酒

Answer 1

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

我可以考虑三种方法:

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。

我认为它比cookie更优雅，但是它有一个缺点，就是不能在oldbrowsers上工作，当然你可以使用Modernizer进行特征检测并应用一些polyfill (使用cookie)进行交叉浏览。

3) 第三种方法(只要你不需要“动态”html)我想提到的是使用服务器端 session (php/aspx)来跟踪最后一个div 已加载/渲染并渲染下一个。即使您可以从服务器端处理 cookie，如果不想使用基于内存的 session ，缺点将是缓存丢失。

尝试一些代码，然后返回以更多和/或具体细节更新您的问题，以便有人能够帮助您，无论您选择哪种方法。

@RyanS 我的意思是:

关于“动态”如果您只想在页面加载时更改 div，则无需使用客户端脚本，这可以从服务器端实现。

关于“缓存”，如果您要更改服务器端的页面/html，网络服务器将不得不再次将网页“提供”给网络浏览器/客户端，因为它与上次查看相比的变化(丢失缓存，增加一点负载流量，带宽使用)<<< 更好的说法是，如果浏览器确定页面自上次查看(并将)以来发生了变化，将请求 html/page再次。