創建可點擊的多維列表

Question

我正在嘗試使用JavaScript或「更好的解決方案」來創建2個鏈接到彼此像多個數組列表。列表將是字符串。 下面是一個例子：

書架一：第一冊，第二冊，BOOK3 ..... 書架二：Book4，Book5兩個，Book6 .....

'Bookshelfs' 的第一個列表會在一個左邊的Div盒子裏，每次我點擊一個書架時，我想在該書架內顯示該列表。

如何創建此列表以及如何顯示它？

在此先感謝。

Answer 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