在列表项中输出javascript数组，然后单击其中一个将在另一个dic中显示整个项目

所以我必须完成一项任务，我完全是一个javascript/jquery新手！ 我的问题是：

我们需要有几个列表项，从javascript输出。列表itsm仅包含互动程序。 然后，当用户单击其中一个列表项时，页面上的其他地方会显示完整信息，并显示更多详细信息

我必须解决这个问题：

var data={
    "news":[
        {
            "id":"0",
            "title":"Find the best deals",
            "sub":"Featured Story",
            "text":"0 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
            "image":"images\/home_img_4.jpg",
            "link":"#NEWS_0",
        },
        {
            "id":"1",
            "title":"No one likes the grudge",
            "sub":"Featured Story 1",
            "text":"1 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
            "image":"images\/home_img_4.jpg",
            "link":"#NEWS_1",
        },
        {
            "id":"2",
            "title":"Story time is on!",
            "sub":"Featured Story2",
            "text":"2 Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.<br/><br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Morbi porttitor mattis elementum. Duis scelerisque sit amet sem ac lacinia. Aenean ut nisl viverra, scelerisque lectus eget, ullamcorper leo. Ut quis mi mi. Donec vestibulum tellus sed ipsum sodales pharetra. <br/><br/>Praesent sit amet dui luctus, mollis lacus nec, tincidunt magna. Nulla laoreet mauris at nisl dictum, ut ullamcorper magna rhoncus. Suspendisse potenti. Suspendisse quis tincidunt odio, non tristique turpis. Suspendisse consequat sapien vitae ultrices scelerisque. Pellentesque luctus magna laoreet orci consequat fermentum.",
            "image":"images\/home_img_4.jpg",
            "link":"#NEWS_2",
        },

    ]
}

var数据={
“新闻”：[
{
“id”：“0”，
“标题”：“寻找最佳交易”，
“sub”：“特色故事”，
“文本”："你可以坐在那里，继续前进。你可以坐在那里。你可以坐在那里，你可以坐在那里，你可以坐在那里。你可以坐在那里，你可以坐在那里，你可以坐在那里，你可以坐在那里，你可以坐在那里，你可以坐在那里，你可以坐在那里拉奥里特·莫里斯（Laoret mauris）在《圣经》中写道，乌兰姆·科珀·麦格纳·朗卡斯（ullamcorper magna rhoncus）。潜力悬念。非特里斯蒂克·图尔皮斯（tristique turpis）的奥迪奥悬念。智者维特·奥特里斯·斯克勒（vitae ultrices scelerisque）悬念。拉奥里特·拉奥里特·奥里特（luctus magna Laoret orci）发酵悬念。

ipsum dolor door sit amet，奉献精英。莫尔比·波特提托·马提斯·埃莱门两个节杖坐在一起，两个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起在奥迪奥，非三体turpis。苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·拉奥里特·拉奥里特·奥奇·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏这是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子冰上的权杖。大狮子座的巨蟹座的酵母。

ra.

目前有两名妇女，mollis lacus nec，Tincidus magna.Nulla laoreet mauris在nisl dictum，ullamcorper magna rhoncus.Suspendisse potenti.Suspendisse quis Tincidus odio，non tristique turpis.Suspendisse consequest sapien vita ultrices scelerisque.Pellent luctus magna Laoscreet orci consequat酵母菌。”，
“image”：“images\/home\u img\u 4.jpg”，
“链接”：“新闻0”，
},
{
“id”：“1”，
“头衔”：“没人喜欢怨恨”，
“sub”：“特色故事1”，
“文本”：1.奥雷姆·伊普斯姆·多洛·塞特·塞特·塞特·塞特·塞特·塞特·塞特·塞特·塞特·塞特·塞特·塞特·尼尔斯·维韦拉、塞特·莱克斯·塞特、乌兰·科佩尔·利奥。但我不知道，我的前庭告诉我的是普斯姆·索德莱斯·法雷特拉。

拉奥里特·莫里斯（Laoret mauris）在《圣经》中写道，乌兰姆·科珀·麦格纳·朗卡斯（ullamcorper magna rhoncus）。潜力悬念。非特里斯蒂克·图尔皮斯（tristique turpis）的奥迪奥悬念。智者维特·奥特里斯·斯克勒（vitae ultrices scelerisque）悬念。拉奥里特·拉奥里特·奥里特（luctus magna Laoret orci）发酵悬念。

ipsum dolor door sit amet，奉献精英。莫尔比·波特提托·马提斯·埃莱门两个节杖坐在一起，两个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起，一个节杖坐在一起在奥迪奥，非三体turpis。苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·拉奥里特·拉奥里特·奥奇·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏维埃·苏这是一个很好的例子。它是一个很好的例子。它是一个很好的例子。它是一个很好的例子冰上的权杖。大狮子座的巨蟹座的酵母。

ra.

目前有两名妇女，mollis lacus nec，Tincidus magna.Nulla laoreet mauris在nisl dictum，ullamcorper magna rhoncus.Suspendisse potenti.Suspendisse quis Tincidus odio，non tristique turpis.Suspendisse consequest sapien vita ultrices scelerisque.Pellent luctus magna Laoscreet orci consequat酵母菌。”，
“image”：“images\/home\u img\u 4.jpg”，
“链接”：“新闻1”，
},
{
“id”：“2”，
“标题”：“故事时间到了！”，
“sub”：“特色故事2”，
“文本”：“2 Lorem ipsum dolor sit amet，Concertetur Adipising el
<ul class="mini-feed">
    <li class="title" data-item="0">Test title</li>
    <li class="title" data-item="1">Test title 1</li>
    <li class="title" data-item="2">Test title 2</li>
    <li class="title" data-item="3">Test title 3</li>
    <li class="title" data-item="4">Test title 4</li>
</ul>

<div class="">
    <img id="image" src="" class="image" />
    <h1 id="title" class="title">Test title</h1>
    <span id="body" class="sub">some tagline</span>
</div>

$(document).ready(function(){
 $('.title').click(function(){
  var itemIndex = $(this).data('item');
  popItemToScreen(data.news[itemIndex]);
 });
});

function popItemToScreen(dataItem){
 $('#image').src = dataItem.image;
 $('#title').html(dataItem.title);
 $('#body').html(dataItem.text);
}

<ul id="mylist">
    <li data-id="0">Title 1</li>
    <li data-id="1">Title 2</li>
    <li data-id="2">Title 3</li>
</ul>

<div id="content"></div>

<script>
    /**
     * get the data-index="" value and
     * use it's id as an index to pick 
     * a particular item from the data[] array
     * 
     * .html() populates #content with the given
     * .text.
    **/
    $('#mylist li').on('click', function() {
         $('#content').html( data.news[$(this).data('id')].text );
    });
</script>

<script>
    $(document).ready(function() {
       //This will pre-load the Array's 3rd news piece.
       $('#content').html( data.news[2].text );
    });
</script>