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

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

Once 可以使用链表，甚至可以使用指向 prev/curr/next 轨道的类 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

您甚至可以通过仅跟踪当前曲目来进一步简化此过程。注意