单击循环数组

时间:2013-12-01 05:57:16

标签: javascript jquery arrays iframe

我有一系列网址,例如:

var urls = ["http://www.getbootstrap.com","http://www.reddit.com","http://www.bbc.com/news","http://www.google.com"];

我有一个iframe:

<iframe></iframe>

和两个链接:

<a href="#" id="forwards">Forwards</a> <a href="#" id="backwards">Backwards</a>

我要做的是将其链接起来,以便<iframe>显示数组中的第一个网址,当您点击向前或向后时,它会将src属性更改为下一个网址或以前的网址。此外,当它位于数组的开头或结尾时,然后单击按钮应该分别将它带到数组的末尾或开始。我有这个:

$('#forwards').click(function(){
    current++;
    $('iframe')[0].src = urls[current];
});

并且向后移动,但效率非常低,并且在到达阵列的任何一端时都不起作用。有没有更好的方法呢?

1 个答案:

答案 0 :(得分:2)

DEMO

var urls = ["http://www.getbootstrap.com",
            "http://www.reddit.com",
            "http://www.bbc.com/news",
            "http://www.google.com"
           ],
    c = 0,
    n = urls.length;

$('#forwards, #backwards').click(function( e ){
    e.preventDefault(); 
    c = this.id=='forwards' ? ++c : --c;
    c = c<0? n-1 : c%n ;

    $('iframe')[0].src = urls[c];
}); 

n.b。 Google使用X-Frame-Options标头阻止其服务嵌入到外部网页内的iframe中。