创建可点击的多维列表答案

【问题标题】：Creating clickable multidimensional list创建可点击的多维列表
【发布时间】：2016-05-18 16:12:30
【问题描述】：

我正在尝试使用 javascript 或“更好的解决方案”来创建 2 个彼此链接的列表，就像一个多数组一样。列表将是字符串。这是一个例子：

书架一：Book1、Book2、Book3 ..... 书架二：Book4、Book5、Book6……

“书架”的第一个列表将在左侧的 Div 框中，每次我点击书架时，我都希望在该书架内显示该列表。

如何创建此列表以及如何显示它？

提前致谢。

【问题讨论】：

我建议您至少从为那些“书架”创建 HTML 标记开始。之后，将该标记添加到您的问题中
对不起，这是我第一次在这里发布问题，所以我不知道正确的做法。

标签： javascript arrays list object multidimensional-array

【解决方案1】：

您还没有提供任何示例代码，下次您提出问题时我会推荐这个。

首先，您需要使用HTML 元素（例如divs 和lists）在标记中表示书架。

HTML：

<div id="bookshelf1">
  <ul>
  </ul>
</div>

<div id="bookshelf2">
   <p></p>
</div>

然后您需要跟踪书架结构，我使用了一个对象字面量和一维数组（您必须自己修改它，所以我不会为您完成所有工作）。

JavaScript / jQuery：

var bookshelves = {};
bookshelves.bookshelf1 = [];
bookshelves.bookshelf2 = [];

function addBooks() {
   bookshelves.bookshelf1.push("Book 1");
   bookshelves.bookshelf1.push("Book 2");
   bookshelves.bookshelf1.push("Book 3");
   bookshelves.bookshelf2.push("Book 4");
   bookshelves.bookshelf2.push("Book 5");
   bookshelves.bookshelf2.push("Book 6");
}

function addBooksToDOM() {
   $(bookshelves.bookshelf1).each(function(i,v) {
      $("#bookshelf1 ul").append("<li data-index=" + i + ">" + v + "</li>");
   });
}

$(document).ready(function() {
   addBooks();
   addBooksToDOM();

   $("#bookshelf1 ul li").on("click", function() {
      var index = $(this).data("index");
      $("#bookshelf2 p").text(bookshelves.bookshelf2[index]);
   });
});

JSFiddle 演示完整示例：

https://jsfiddle.net/bg5dLxb8/

阅读以下内容，了解如何创建二维数组来存储嵌套书架：

https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Array

【讨论】：

@Henk - 如果这有帮助，请将其标记为答案。