javascript - 刷新页面时在 div 上附加自定义数据

Question

在页面刷新时，我想从 div 中的数组中附加一个随机 anchor 。我的代码如下所示:

<div id="exit-offer" class="exit-offer-dialog">
    <div class="offer-content" id="banner-load">
        <button class="close-offer" data-role="close-offer">&times;</button>
    </div>
</div>

我的 js 是这样的:

var exitPopLinks = [
            '<a href="#"><img data-role="offer" src="/img/exit-offer-v1.jpg"></a>',
            '<a href="#"><img data-role="offer" src="/img/exit-offer-v2.jpg"></a>',
            '<a href="#"><img data-role="offer" src="/img/exit-offer-v3.jpg"></a>',
            '<a href="#"><img data-role="offer" src="/img/exit-offer-v4.jpg"></a>'
        ];
$( "banner-load" ).append(exitPopLinks);

如何在页面刷新时使用 exitPopLinks 变量中的随机值填充#banner-load？

Answer 1

您可以使用如下代码:

var index = Math.floor(Math.random()*exitPopLinks.length);
$("#banner-load").append(exitPopLinks[index]);

我正在根据要求更新答案，您可以将链接放在 a 标签上

var exitPopLinks = [
            '<a href="link1"><img src="/img/exit-offer-v1.jpg"></a>',
            '<a href="link2"><img src="/img/exit-offer-v2.jpg"></a>',
            '<a href="link3"><img src="/img/exit-offer-v3.jpg"></a>',
            '<a href="link4"><img src="/img/exit-offer-v4.jpg"></a>'
        ];

或者也可以在添加元素后添加如下代码。

var linkUrl = ['l1','l2','l3','l4']
$("#banner-load a").bind("click",{},onLinkClicked);
function onLinkClicked(e){
   window.location = linkUrl[index];
}