單擊循環數組

Question

我有一系列的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];
});

並且向后移動，但效率非常低，並且當你到達陣列的任何一端時都不起作用。 有沒有更好的方法呢？

Answer 1

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

^nb Google使用X-Frame-Options標頭來阻止其服務嵌入到外部頁面內的iframe中。