javascript - 如何为数组生成上一个和下一个按钮？

Question

我有一个具有此特定数组的函数。

var elementsArray = xmlDocument.documentElement.getElementsByTagName('track');
        // console.log(elementsArray);
        var arrayLength = elementsArray.length;
        var output = "<table>";
        for (var i=0; i < arrayLength; i++)
        {
          var title = elementsArray[i].getElementsByTagName('title')[0].firstChild.nodeValue;
          var artist = elementsArray[i].getElementsByTagName('artist')[0].firstChild.nodeValue;
          var length = elementsArray[i].getElementsByTagName('length')[0].firstChild.nodeValue;
          var filename = elementsArray[i].getElementsByTagName('filename')[0].firstChild.nodeValue;
          console.log(title + '  ' + artist + '  ' + length + '  ' + filename);
          output += "<tr>";
          output += ("<td onclick='songSelect(\"" + filename + "\")'>" + title + "</td><td>" + artist + "</td>");
          output += "</tr>";
        }

有了这个数组，我将如何生成上一个和下一个要移动的按钮。
http://jsfiddle.net/xbesjknL/

Answer 1

一次可以使用链接列表，甚至可以使用指向上一个/当前/下一个轨道的类C指针的概念。但是可惜这是Javascript，而客户端也负担太多处理工作。

因此，您可以在像光标这样的对象中建立自己的简化指针，该对象不断指向当前轨道的索引，上一个轨道的索引和下一个轨道。每当用户单击上一个或下一个按钮以相应地更新光标的指针时，您都将调用refresh方法。

var cursor = { 
  prev:(elementsArray.length-1), 
  curr:0, 
  next:(1 % (elementsArray.length-1)),

  refresh: function(button){ //button is either the btnPrev or btnNext elements
    if (button.getAttribute("id") === "btnPrev") {
      old_curr = this.curr;
      this.curr = this.prev;
      if ((this.curr-1) < 0)
        this.prev = elementsArray.length-1;
      else    
        this.prev = this.curr - 1;
      this.next = old_curr;
    } else {
      old_curr = this.curr;
      this.curr = this.next;
      if ((this.curr+1) > (elementsArray.length-1))
        this.next= 0;
      else
        if (elementsArray.length === 1)
          this.next = 0;
        else
          this.next = this.curr+1;
      this.prev = old_curr;
    }
  }
};

// example usage:
cursor.refresh(btnPrev);
elementsArray[cursor.curr]; // gives the previous track, which is now the current track

您甚至可以仅通过跟踪当前轨道来进一步简化此操作。注意