返回當前顯示的數組的索引Javascript

我有一個簡單的數組，其中x個項目。我通過鏈接點擊單獨顯示它們...我想更新一個數字，表示10中的1。當下一個顯示時，我希望它顯示2/10等...返回當前顯示的數組的索引Javascript

我看了所有周圍，我的大腦現在被炒了...我知道它簡單，我只是不能把它弄出來。

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
    "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> 

<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en"> 

<head> 
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8"/> 
    <title>Page Title</title> 
    <link rel="stylesheet" href="style.css" type="text/css" media="screen" charset="utf-8"/> 
    <script type="text/javascript"> 
    var quotations = new Array() 
     quotations[0]= "abcd" 
     quotations[1]= "efgh" 
     quotations[2]= "ijkl" 
     quotations[3]= "mnop" 
     quotations[4]= "qrst" 
     quotations[5]= "uvwx" 
     quotations[6]= "yzab" 

     numQuotes = quotations.length; 
     curQuote = 1; 

     function move(xflip) { 
     curQuote = curQuote + xflip; 
     if (curQuote > numQuotes) 
     { curQuote = 1 ; } 
     if (curQuote == 0) 
     { curQuote = numQuotes ; } 
     document.getElementById('quotation').innerHTML=quotations[curQuote - 1]; 
     } 
     var curPage = curQuote 
       </script> 

</head> 

<body> 
<div id="quotation"> 
<script type="text/javascript">document.write(quotations[0]);</script> 
</div> 
<div> 
<p><a href="javascript();" onclick="move(-1)">GO back</a> 
<script type="text/javascript">document.write(curPage + " of " + numQuotes)</script> 
<a href="javascript();" onclick="move(1)">GO FORTH</a></p> 

</div> 
</body> 

</html>

編輯：curQuote沒有動態更新...當點擊下一個時它保持在'1'。

來源

2010-03-12 Jeff Kindred

在您的代碼中，curQuote已經是您想要的值。我重寫了所有內容以清理它並顯示一些更好的邏輯/語法。請注意，理想情況下，您將通過DOM方法附加點擊處理程序，而不是使用內聯處理程序，但爲了簡單起見，我已將其留在了這裏。

工作版本這裏查看：http://jsbin.com/irihu3/2

<html> 
    <head> 
    <title>Quotations</title> 
    <script type="text/javascript" charset="utf-8"> 
     var quotations = ["hi", "how", "are", "you", "today", "good", "sir"], 
     lastIndex = quotations.length - 1, 
     currentIndex = 0; 

     function move(xflip) { 
     currentIndex = currentIndex + xflip; 

     if (currentIndex > lastIndex) { 
      currentIndex = 0; 
     } else if (currentIndex < 0) { 
      currentIndex = lastIndex; 
     } 

     document.getElementById('quotation').innerHTML = quotations[currentIndex] + " (Quote #" + (currentIndex + 1) + ")"; 
     return false; 
     } 
    </script> 
    </head> 
    <body> 
    <div id="quotation">hi (Quote #1)</div> 
    <a onclick="move(-1);">Prev</a> 
    <a onclick="move(1)">Next</a> 
    </body> 
</html>

需要注意以下幾點：

始終與var關鍵字聲明變量或創建全局變量。
您可以將多個變量聲明組合成一個語句，用逗號分隔它們。堅持一個var聲明並將其放在代碼/函數的頂部是一種很好的做法。
你真正需要跟蹤的是數組的當前索引，而不是引用本身。數組的長度也不重要，只是最後一個索引是什麼。因此，在我的代碼中，我使用的是currentIndex和lastIndex而不是curQuote和numQuotes。
在函數的末尾使用return false;將在單擊超鏈接（不在鏈接之後）時取消默認操作。在這種情況下，這是你想要的，因爲你使用超鏈接來觸發頁面上的行爲，而不是實際導航到另一個頁面。

來源

2010-03-12 20:52:57

您在此處提供的代碼按預期工作，但它不能爲我的初始問題提供解決方案... curQuote不會因某種原因動態更新。感謝您爲我更新語法和邏輯！ – 2010-03-12 21:09:41

不確定「動態更新」是什麼意思。我的代碼中的currentIndex將始終包含當前在頁面上顯示的引用的索引。因爲'currentIndex'是在'move'函數之外定義的，所以無論何時單擊鏈接，該變量總是通過'move'函數更新。 – 2010-03-12 21:15:39

當我加載頁面時，當我點擊下一頁（調用移動功能）時，它會顯示「1的7」，即使顯示數組的第二個索引，仍然會顯示「7的1」。 – 2010-03-12 21:20:20

你在JavaScript中犯了很多初學者錯誤，但好像curQuote有你想要的價值，不是嗎？

提示：
可以聲明數組作爲這樣：var array = [1,2,3,4,5,6,7];
終止與分號語句。
對局部變量使用var關鍵字。
如果聲明正文，請勿將大括號括在一行中。
正確使用縮進使代碼可讀。

來源

2010-03-12 20:38:12

curQuote不會動態更新 – 2010-03-12 20:56:37

它會在您每次調用move時更新，因爲您正在分配給它並且它是全局變量。 – 2010-03-12 21:07:17

試試這個 var curPage = quotations [curQuote];

來源

2010-03-12 20:40:38 Artic

他需要的索引不是這裏的值。另外''當它包裝時''''''''''''''''''''''''設置爲'你會爲這種情況下的索引超出範圍。 – 2010-03-12 20:47:42

返回當前顯示的數組的索引Javascript

回答

相關問題