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。

我认为它比Cookie更优雅，但它有缺点不适用于旧浏览器，当然你可以使用Modernizer来检测功能并应用一些{ {3}}（使用Cookie）进行交叉浏览。

3）第三种方法（只要你不需要＆＃34;动态＆＃34; html）我想提一下使用服务器端会话（php / aspx））跟踪加载/渲染的最后一个div并渲染下一个div。如果你不想使用基于内存的会话，即使你可以处理服务器端的cookie，缺点也会失去缓存。

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

@RyanS我的意思是：

关于＆＃34;动态＆＃34; 如果您仅在加载页面时更改div，则无需使用clientSide脚本，这可以从服务器端实现。

关于＆＃34;缓存＆＃34; ，如果您要更改服务器端的页面/ html，则网络服务器必须＆＃34;服务＆＃34 ; Web页面再次返回WebBrowser / Client，因为它从上次查看更改（丢失缓存，添加一些负载流量，带宽使用）＆lt;＆lt;＆lt;更好地说，如果浏览器确定页面自上次查看后已经发生变化（并且将会）再次请求html /页面。

Answer 2

您可以使用Cookie来保存可见的当前div编号。

了解如何设置和检索Cookie：JavaScript Cookies

获得当前div编号后（例如名称为divNum，运行此函数

 function showDiv() {
      $("#div" + divNum).show();

      divNum++;
      //Remember to set the divNum back to the cookies for later use
 }

我不是专业人士，所以也许有更好的方法来解决这个问题。 CMIIW〜

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

2 个答案: