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

我在互联网上看到了以下代码：

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

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

---

谢谢，Sake

您可以使用Cookies保存当前可见的div编号

阅读以下有关如何设置和检索Cookie的内容：

获取当前div编号（例如名称为

divNum

）后，运行此函数

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

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

我不是职业选手，所以也许有更好的方法来处理这件事。。

---

CMIIW~

您可以使用Cookies保存当前可见的div编号

阅读以下有关如何设置和检索Cookie的内容：

获取当前div编号（例如名称为

divNum

）后，运行此函数

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

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

我不是职业选手，所以也许有更好的方法来处理这件事。。

---

CMIIW~

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

我可以想到三种方法：

1）您可以尝试前面的答案（来自@Charlie）使用cookies存储当前div

• 您可以尝试使用纯javascript处理cookie，或者更好
• 既然您已经在使用jquery，请看一下这篇漂亮的文章和jquery的$.cookie插件：

这具有在旧浏览器中工作的优势（jquery将负责交叉浏览）

使用带有jQuery的cookies更新示例（jQuery.cookie插件）

在jQuery之后添加插件

假设我们/您有以下html divs：

//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>

//请注意，div使用带数字结尾的前缀id
//（我认为这是最好的选择）

这是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>

$（文档）.ready（函数（）{
//仅出于本示例的目的，隐藏所有div，
//你应该用css隐藏div
$（'#mdiv1'）.hide（）；
$（'#mdiv2'）.hide（）；
$（'#mdiv3'）.hide（）；
//检查cookie是否已设置
if（$.cookie（“currentDiv”）==未定义）{
$.cookie（“currentDiv”，1）；
}else{//else..嗯
//获取并增加值，假设只有3个div
var numValue=parseInt（$.cookie（“currentDiv”）；
numValue=numValue+1；
如果（数值>3）{
//重新启动到1
$.cookie（“currentDiv”，1）；
}
否则{//没有问题，请指定递增的值
$.cookie（“currentDiv”，numValue.toString（））；
}
//显示div
$（'#mdiv'+$.cookie（“currentDiv”）.show（）；
}
});

2）正如@Ra Mon评论的那样，localStorage是另一个很好的选项（现代浏览器）来跟踪最后加载的div

我认为它比cookies更优雅，但它有一个缺点，即不能在旧浏览器上运行，当然你可以使用它来进行功能检测，并应用一些（使用cookies）来实现交叉浏览。

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

尝试一些代码，然后用更多和/或特定的细节更新您的问题，这样无论您选择什么方法，都有人能够帮助您

@瑞安，我是说：

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

---

关于“缓存”如果您要在服务器端更改页面/html，web服务器将不得不再次“服务”web浏览器/客户端，因为它与上次查看的页面不同（缓存丢失，添加一点负载流量，带宽使用）如果您只想在加载页面时更改div（这意味着不需要为您的div运行幻灯片，而是要更改html以隐藏/显示它们）

我可以想到三种方法：

1）您可以尝试前面的答案（来自@Charlie）使用cookies存储当前div

• 您可以尝试使用纯javascript处理cookie，或者更好
• 既然您已经在使用jquery，请看一下这篇漂亮的文章和jquery的$.cookie插件：

这具有在旧浏览器中工作的优势（jquery将负责交叉浏览）

使用带有jQuery的cookies更新示例（jQuery.cookie插件）

在jQuery之后添加插件

假设我们/您有以下html divs：

//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>

//请注意，div使用带数字结尾的前缀id
//（我认为这是最好的选择）

这是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>

$（文档）.ready（函数（）{
//仅出于本示例的目的，隐藏所有div，
//你应该用css隐藏div
$（'#mdiv1'）.hide（）；
$（'#mdiv2'）.hide（）；
$（'#mdiv3'）.hide（）；
//检查cookie是否已设置
if（$.cookie（“currentDiv”）==未定义）{
$.cookie（“currentDiv”，1）；
}else{//else..嗯
//获取并增加值，假设只有3个div
var numValue=parseInt（$.cookie（“currentDiv”）；