2013-10-20 35 views
0

我有我的網頁上這樣的代碼來改變我的有兩個按鈕的更改按鈕的JavaScript值的函數

  • 上一頁內容
  • 下一頁

它只能如果我有設置爲上一個和下一個按鈕的值,我想添加函數名稱來執行與按鈕相同的操作,因此將按鈕的名稱更改爲Before和After。

---我想基本上有兩種功能之一,使得比以前一樣,一個用於下一---

下面是代碼

<input type="button" value="Previous" /> 
<input type="button" value="Next" /> 
<br /> 
<iframe id="frame" src="1.html"> 
</iframe> 

<script> 
    var locations = ["1.html", "2.html", "3.html","4.html"]; 
    var currentIndex = 0; 
    var len = locations.length; 

    $(document).ready(function(){ 
     $(':button').click(function() { 
      currentIndex = this.value == "Next" ? 
      currentIndex < len - 1 ? ++currentIndex : 0 : 
      currentIndex > 0 ? --currentIndex : len - 1; 
      $('#frame').attr('src', locations[currentIndex]); 
     }); 
    }); 
</script> 

回答

1

如果我沒有理解好,你要像

var locations = ["1.html", "2.html", "3.html","4.html"], 
    len = locations.length; 
var currentIndex = (function(){ 
    var index = 0; 
    return function(idx) { 
     if(idx === void(0)) return index; 
     index = idx; 
     $('#frame').attr('src', locations[index]); 
    } 
})(); 
/* To read currentIndex use `currentIndex()` 
    To set currentIndex use `currentIndex(value)` */ 
function prev() { 
    currentIndex(currentIndex() < len - 1 ? currentIndex()+1 : 0); 
} 
function next() { 
    currentIndex(currentIndex() > 0 ? currentIndex()-1 : len - 1); 
} 
$(document).ready(function(){ 
    $('#prev') 
     .val('Previous') 
     .click(prev); 
    $('#next') 
     .val('Next') 
     .click(next); 
}); 

<input type="button" id="prev" />&nbsp;<input type="button" id="next" /> 
<br /> 
<iframe id="frame" src="1.html"> 
</iframe> 
+0

他們修改我的問題,所以現在更困惑,但我基本上想要的是兩個功能:一個做比下一個按鈕和另一個比前一個按鈕相同,因爲現在我只能使按鈕工作如果我將它們的值設置爲上一個或下一個。 –

+0

@AlanFoust而且我的代碼不工作? – Oriol

+0

哦等待...你錯過了iframe –

0

奧里奧爾的答案給你兩個功能。我會去這樣的:

VAR位置= [ 「1.HTML」, 「2.HTML」, 「3.html」, 「4.html」],

<html> 
    <head> 
    <script type="text/javascript" src="http://code.jquery.com/jquery-1.9.1.js"></script> 
    <script> 
     $(document).ready(function(){ 
     var locations = ["1.html", "2.html", "3.html","4.html"]; 
     var currentIndex = 0; 
     var len = locations.length; 
     function prev() { 
     if(currentIndex == 0){ 
     currentIndex = len-1; 
     }else{ 
     currentIndex--; 
     } 
     $('#frame').attr('src', locations[currentIndex]); 

     } 
    function next() { 
     if(currentIndex == len -1){ 
     currentIndex = 0; 
     }else{ 
     currentIndex++; 
     } 
     $('#frame').attr('src', locations[currentIndex]); 
     } 
     $('#prev').click(prev); 

     $('#next').click(next); 
     }); 
    </script> 
    </head> 
    <body> 
    <input type = "button" id = "prev" value = "Before" />&nbsp;<input type = "button" value = "After" id = "next" /> 
    <br /> 
    <iframe id="frame" src="1.html"></iframe> 
    </body> 
</html> 
+0

嗯,是我以前試過,但你看到一個令兩個功能出了這 - 下一個和因爲其他的前一個功能使用功能可以給我更多的靈活性,我設計的是maki ng - 謝謝 –

+0

這是一個更新,實現兩個功能,就像Oriol的回答 –

+0

你可以把它放在代碼上,因爲某些原因對我來說它不工作我不知道我是否放錯了位置,但我不'你是這麼認爲的。 [這裏是代碼](http://pastebin.com/esbmBUWV)我非常感謝非常感謝。 –