Question

我有三个div，我想在每个页面刷新时显示不同的div。所以首先div1比div2和div3再回到div1等。

我用谷歌搜索了但是我能找到的完全正好相反，这是刷新div一段时间后（例如10秒）没有页面刷新。

（我顺便使用Jquery，但普通的javascript也不错）

Answer 1

您没有说明为什么要在页面刷新时执行此操作。

如果用户驱动的预期刷新可以在服务器端完成（您需要维护页面加载次数的某种状态，可能在cookie中）。

如果您自己进行刷新（在JS中有一个按钮或定时动作，则刷新页面），然后在同一位置，您可以交换div（通过ajax或通过hvaing加载所有三个div）无论如何页面并使用jquery隐藏/显示。）

cookie可以存储与div相关的数字。然后js或服务器端找到div（可能是基于js中的nth-child选择，如果他们是兄弟姐妹，如果不是通过查找id为'#div'+索引的div）

所以在伪代码中：

在页面加载检查是否存在cookie，如果这样读取它的值，然后通过递增它来设置它在一个循环中（即如果它的命中3将其设置为1）
使用'hide（）'隐藏所有div
使用'show（）'和读入值（在更改之前从cookie中）使用nth-child或id选择div 选择器并显示它

修改如果你想要一个只有javascript的解决方案，假设你的html是：

<div id="div1"> div 1 </div> <div id="div2"> div 2 </div> <div id="div3"> div 3 </div>

您可以在头部添加以下脚本。它使用quirksmode cookie读/写方法。您可能希望用jquery cookie插件（或其他任何东西）替换它们。它还隐藏了第4个底线中的所有div，更有可能你想使用jquery选择器来专门选择你的三个：

function createCookie(name, value, days) { if (days) { var date = new Date(); date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000)); var expires = "; expires=" + date.toGMTString(); } else var expires = ""; document.cookie = name + "=" + value + expires + "; path=/"; } function readCookie(name) { var nameEQ = name + "="; var ca = document.cookie.split(';'); for (var i = 0; i < ca.length; i++) { var c = ca[i]; while (c.charAt(0) == ' ') c = c.substring(1, c.length); if (c.indexOf(nameEQ) == 0) return c.substring(nameEQ.length, c.length); } return null; } $(function () { var val = readCookie('div'); // Get last value createCookie('div', "", -1); // clear cookie $('div').hide(); // hide all divs val = (val == null || val == 3) ? 1 : (Number(val) + 1); // incremeent value $('#div' + val).show(); // show current div createCookie('div', val, 1); // set value for next time });

这是一个仅限javascript和cookie的解决方案

Answer 2

编辑抱歉误解了这个问题，如果你想要它们的订购，你需要做一些像cargowire建议的持久性。

否则，假设您在页面加载时调用了一个方法（loadDiv）。

function loadDiv()
{
    //Generate a random number between 1 and 3
    var divNumberToShow = Math.ceil(Math.random()*3);
    //If your divs are shown to start - hide them, otherwise unnecessary
    $("hideable-div").hide();
    $("#div" + divNumberToShow).show();
}

这假设您的可隐藏div具有一类hideable-div并且它们的ID已编号。

Answer 3

mm ..............因为我不知道你的programinng语言和其他东西是什么。这可能对你没用，但是如果你使用的是zend框架，那就是这样做的方法。

在控制器的init方法中创建一个会话变量

functiion init() {

$defaultNamespace = new Zend_Session_Namespace('Default');
$defaultNamespace->divnumber = 1 ; 

}

然后在你的行动中你sholud将它传递给视图

public function divchangeAction{

  $this->view->currentdiv = $defaultNamespace->divnumber ;

}

在你的视图中.it是divchange.phtml

<script lanuage='javascript'>

//get the session variable 
    var divnumber = <?php echo $this->currentdiv ; ?>;

$(document).ready(funcction(){

//hide the divs
$('#divone').hide();
$('#divtwo').hide();
$('#divthree').hide();

//show one div
if(divnumber==1){
    $('#divone').show();
}
else if(divnumber==2) {
   $('#divtwo').show();
}
else {
   $('#divthree').show();
}

//increase the divnumber value

divnumber = divnumber + 1 ;

if(divnumber >3) {

divnumber = 1 ;

}

//pass new div number to the controller's changecache action  and update the session variable 

$.post("baseurl/changecache", {divnumber : divnumber},
   function(data) {

   });


});

你的changecacheAction中的

public function changecacheAction() {

//take the div number 

$divnumber = $_POST['divnumber'];

//update session variable 

$defaultNamespace->divnumber = $divnumber ;

}

这是在zend框架中执行此操作的方法，请记住，您无法在客户端执行此操作。因为当页面刷新时，客户端变量恢复，你会使用会话或cookie。：）

在页面刷新时循环三个div

3 个答案: