0

所以我必须完成一项任务，而且我是一个完全的 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",
        },

    ]
}

还有一个更好的例子来说明我在寻找什么： jsfindle

谢谢！乔治

4

2 回答 2

1

填充 UL 列表时，将属性“数据项”添加到 LI(s)，为其提供数据数组中该项的索引值。

<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>

还给出显示部分 ID 中的元素：

<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>

然后添加以下javascript（考虑到您使用的是jQuery）

$(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);
}

这应该可以解决问题

于 2013-09-26T08:01:28.500 回答
1

小提琴：http: //jsfiddle.net/j9QEM/11/

<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>

在您的评论中，您提到了在考虑 Id 的情况下加载页面，您可以在页面加载后：

<script>
    $(document).ready(function() {
       //This will pre-load the Array's 3rd news piece.
       $('#content').html( data.news[2].text );
    });
</script>
于 2013-09-26T08:07:44.847 回答