单击时循环遍历数组

Cycle through array on click

本文关键字：数组 遍历 循环 单击      更新时间：2024-01-13

我有一个URL数组，例如：

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>显示数组中的第一个URL，当您向前或向后单击时，它会将src属性更改为下一个URL或上一个URL。此外，当它位于数组的开始或结束时，单击按钮应分别将其带到数组的结束或开始。我有这个：

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

向后也是一样，但效率非常低，当你到达数组的任何一端时都不起作用。有更好的方法吗？

演示

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中。

相关文章：