Question

我有一个包含x个项目的简单数组。我通过链接点击单独显示它们...我想更新一个说明1中的1的数字。当显示下一个时我希望它显示10个中的2个等...

我四处看看，我的脑子现在已经被炸了......我知道它很简单，我不能把它拿出来。

<!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'。

Answer 1

你在JavaScript中犯了很多初学者的错误，但似乎curQuote有你想要的值，不是吗？

提示：
您可以这样声明一个数组：var array = [1,2,3,4,5,6,7];
使用分号终止语句对本地变量使用var关键字如果声明正文，请不要在一行左右括号正确使用缩进以使代码可读。

Answer 2

在您的代码中，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;将取消默认操作。在这种情况下，这就是您想要的，因为您使用超链接触发页面上的行为而不是实际导航到另一个页面。

Answer 3

试试这个 var curPage = quotations [curQuote];

返回当前显示的数组Javascript的索引

3 个答案: