【问题标题】:How to load a different div on reload (in repeating order)如何在重新加载时加载不同的 div(按重复顺序)
【发布时间】:2014-04-26 00:14:02
【问题描述】:

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

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

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

谢谢,清酒

【问题讨论】:

  • 如果您每次都重新加载整个页面,您将如何跟踪显示哪个 div?
  • 我认为您想为您的 div 创建一种幻灯片,对吗?顺便说一句,您发布的代码对我来说对 jQuery 来说似乎太多了。请添加您的 html 代码。
  • 是的,我想要一个幻灯片,但它只需要在页面重新加载时按重复顺序进行更改,这是 jquery,但 javascript 也可以
  • Cookies(几乎所有浏览器和版本)或 localStorage(在此处查看兼容性:quirksmode.org/html5/index.html)将为您工作。要使用 jQuery 处理 cookie,请参阅:sitepoint.com/eat-those-cookies-with-jquery 也可以使用 PHP/ASPX 尝试基于会话的方法来加载/呈现差异 div(如果您正在使用会话)。

标签: javascript jquery html random reload


【解决方案1】:

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

我可以考虑 3 种方法:

1)您可以尝试像以前的答案(来自@Charlie)一样使用cookies来存储当前的div。

这具有在旧浏览器中工作的优势(jquery 会处理crossbrowsing

更新一个使用 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 来进行特征检测并应用一些 polyfill(使用 cookie) 进行交叉浏览。

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

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

@RyanS 我的意思是:

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

关于“缓存”,如果您要在服务器端更改页面/html,则网络服务器将不得不再次将网页“提供”给 WebBrowser/Client,因为它从上次查看的更改(丢失缓存,添加一点负载流量,带宽使用)

【讨论】:

  • 您能否就第三种方法丢失动态 html 和缓存的观点展开阐述?
  • 嗨@RyanS 扩展/更新,它是关于丢失缓存并且需要或不需要“动态”html。
  • 好吧,我以为你的意思是缓存图像,这不会受到影响。谢谢+1
【解决方案2】:

您可以利用 Cookies 来保存当前可见的 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~

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-10-28
    • 1970-01-01
    • 2014-02-28
    • 2011-11-02
    • 2013-09-18
    • 2016-04-19
    • 1970-01-01
    • 1970-01-01
    相关资源
    最近更新 更多