在每个页面加载时显示随机 DIV（对于fancybox modal）

Posted 2023-02-25

【中文标题】在每个页面加载时显示随机 DIV（对于fancybox modal）

【英文标题】：Show Random DIV on every page load (For fancybox modal)

【发布时间】：2013-12-01 12:55:12

【问题描述】：

当访问者离开网站时，我正在显示一个花式框模式窗口。它工作正常。但作为拆分测试，我想在后续访问中向访问者显示来自 2 个不同 div 的随机内容。

意思：

1) 当访问者 1 来并试图离开站点时，他可能会看到内容为 1 或 2 的 fancybox

2) 当访问者 2 来并试图离开站点时，他可能会再次看到包含内容 1 或 2 的 fancybox

等等……

fancybox modal 的实际代码是：

<div id="inline" class="various2" style="display:none;">
      <div style="padding:20px;">
             This is the content of that shows inside the fancybox modal.
       </div>
</div>

现在对于内部 div，我想放置另一个具有不同内容的 div，其中一个应该在每次页面加载时随机显示，而另一个是 display:none...

我试过这个：How to show one div of many, per page refresh? 但它不起作用并显示两个 div 可见...

谁能帮忙？

编辑：原始问题已回答。现在，我如何在每次页面加载时显示备用 div。不是随机的。像访问者 1,2,3,4 这样的东西分别看到 divs 1,2,3,4。

我知道这需要一些服务器端代码，谁能帮忙提供一些基本的 php 代码？

【参考方案1】：

检查这个小提琴。 我已经删除了 display: none 在你的 div 上，id inline，以便查看结果

http://jsfiddle.net/bPK8y/

var value1 = 'my_first_div';
var value2 = 'my_second_div';
var chosenValue = Math.random() < 0.5 ? value1 : value2;
var chosenDiv = document.getElementById(chosenValue);
chosenDiv.style.display = "block";

html

<div id="inline" class="various2">
  <div style="padding:20px; display: none;" id="my_first_div">
      This is the content of that shows inside the fancybox modal. CONTENT 1
  </div>
  <div style="padding:20px; display: none;" id="my_second_div">
      This is the content of that shows inside the fancybox modal. CONTENT 2
  </div>
</div>

【参考方案2】：

出于某种原因，我更喜欢时间戳而不是随机

HTML

<div id-="fancy_box">
    <div id="inline" class="various1" style="display:none;">
        <div style="padding:20px;">
             This is the content of that shows inside the fancybox modal 1.
       </div>
    </div>
    <div id="inline" class="various2" style="display:none;">
        <div style="padding:20px;">
             This is the content of that shows inside the fancybox modal 2.
       </div>
    </div>
</div>

jQuery

$(function()
    $(".various"+(new Date().getTime() % 2 +1)).css("display", "block");
);

还有fiddle is here

【讨论】：

用 25 个 div 而不是 2 个 div 会怎么样？

抱歉回复晚了，我已经离开一段时间了。基本上你只需将“% 2 +1”更改为“% 25 +1”