Question

在页面刷新时，我想从div中的数组中添加随机锚。我的代码如下：

<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];
}

Answer 2

您可以使用Math.random()生成随机数。请参阅W3Schools JS Random-Example以了解更多信息。

var exitPopLinks = [
            '<a href="#"><img src="/img/exit-offer-v1.jpg"></a>',
            '<a href="#"><img src="/img/exit-offer-v2.jpg"></a>',
            '<a href="#"><img src="/img/exit-offer-v3.jpg"></a>',
            '<a href="#"><img src="/img/exit-offer-v4.jpg"></a>'
        ];
// get the random number from 0 to length of array
var position = Math.floor(Math.random()*exitPopLinks.length);

$("#banner-load").append(exitPopLinks[position]);

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>

刷新页面时在div上添加自定义数据

2 个答案: