Question

我有一个JSON文件，标题有许多关于书籍的不同属性（作者，desc，标题等）。我正在使用JSON将内容加载到div中并仅显示标题。我的问题是我试图让每个标题成为一个链接，并在同一页面上的一个单独的div中显示该特定书籍的其余内容。以下是我到目前为止的情况。每当我尝试在点击功能之后引用任何内容时，我都会回复它＆＃34; undefined＆＃34;

$.getJSON("data/data.json", function(data){
   var res = _.sortBy(data.books, function(item) { return item.name });
   _.each(res, function(item){ 
      $("#books").append("<p class='book'>"+item.name+"</p>");
   });
$(".book").click(function() {
 var clickedItem = $(this);
$("#details").append("<p>"+clickedItem.author+"</p>");

Answer 1

您可以将每本书的详细信息存储在节点的data中。这样你就可以随时访问..

$.getJSON("data/data.json", function(data){
    var res = _.sortBy(data.books, function(item) { return item.name });
    _.each(res, function(item){ 
        var book = $("<p class='book'>"+item.name+"</p>").data('details', item);
        $("#books").append(book);
    });

    $("#books").on('click', '.book', function() {
        var clickedItem = $(this),
            details = clickedItem.data('details');

        $("#details").html("<p>"+details.author+"</p>");
    });
});

使用JSON和underscore.js链接到内容

1 个答案: