使用JavaScript / jQuery從數組填充列表並在“加載更多”按鈕單擊時加載更多項目？

Question

我在JavaScript中有一個數組列表，我需要：

1. 使用JavaScript和/或jQuery從包含的數組中填充列表的前5個課程（可以對所有課程使用相同的圖像）
2. 使“加載更多”按鈕生效，每次點擊可加載5個其他課程
3. 在列出課程之前，請按字母順序對課程進行排序

document.getElementById('load-courses').innerHTML = courses[1];

我一直在嘗試對document.getElementById使用不同的東西（它在jsfiddle中JavaScript的底部），但是它顯示的是未定義的或[object Object]。 我知道填充此列表並不是那么簡單。

https://jsfiddle.net/0jLztmfn/

這是列表最后的樣子。 我已經完成了樣式設置，以后可以進行所需的樣式更改，但是找不到如何在第一次加載時填充5，然后在其余部分填充：在每次單擊時再加載5，然后在列表中按字母順序排序。 我不確定在html內使用span是否正確，因為我需要以某些樣式顯示標題，說明和圖像，因此無法加載列表。 在列出課程之前/之后能夠對它們進行樣式設置的一種好方法是什么？

https://ibb.co/cybkkQ

謝謝

Answer 1

document.body.innerHTML =“ abc”; //將正文內容替換為“ abc”，僅將值作為字符串。 更改.js文件的最后一行，如下所示：

document.getElementById('load-courses').innerHTML = courses[1].Title;

jsfiddle鏈接： https ://jsfiddle.net/raushankumar0717/0jLztmfn/4/

更新：

您可以在頁面上添加圖片：

document.getElementById('courseImg').src=courses[1].ImageLink;

其中courseImg是圖像元素的ID。

jsfiddle展示您的需求： https ://jsfiddle.net/raushankumar0717/0jLztmfn/7/

 var courses = [ { "Title": "Crime Risk New", "ShortDescription": "Donec a sodales lorem. Curabitur at nulla nec sem volutpat accumsan placerat nec elit. Ut bibendum dui vitae purus fringilla rhoncus. Praesent volutpat felis vitae felis ultricies rhoncus. Nulla maximus nibh vel enim ullamcorper aliquam. Nam efficitur est nibh, id mollis nisl ullamcorper et.", "ImageLink": "image1.jpg" }, { "Title": "Alternative Ireland Mergers Statements Practice", "ShortDescription": "Aenean iaculis vehicula sollicitudin. Sed convallis, massa sit amet venenatis volutpat, arcu dolor volutpat neque, in lobortis arcu velit hendrerit ante. Quisque accumsan luctus enim eu aliquam. Quisque et dolor est.", "ImageLink": "http://design.ubuntu.com/wp-content/uploads/ubuntu-logo32.png" }, { "Title": "Security Leadership Social", "ShortDescription": "Vivamus pellentesque semper arcu eu egestas. Fusce lacinia velit quam, a rhoncus turpis blandit sit amet. Vivamus eros mi, malesuada vitae facilisis at, tincidunt in urna. Morbi sodales at nulla ac commodo.", "ImageLink": "image1.jpg" }, { "Title": "Results regulation Financial Governance and Within", "ShortDescription": "In enim nunc, tempor a congue ut, interdum consequat tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Nulla luctus sodales nulla, at eleifend nibh fermentum eget.", "ImageLink": "image1.jpg" }, { "Title": "UK Leadership Professional Instruments to", "ShortDescription": "Ut a congue quam, eu hendrerit dolor. Ut porta in nunc id porttitor. Pellentesque iaculis pretium vulputate. Aenean eu neque vestibulum, semper leo sed, porttitor sapien. Etiam in justo eu risus scelerisque ultricies. Nunc commodo est in scelerisque semper.", "ImageLink": "image1.jpg" }, { "Title": "Workload Witness Data", "ShortDescription": "Vestibulum maximus et arcu eget congue. Phasellus", "ImageLink": "image1.jpg" }, { "Title": "Business Savings Control", "ShortDescription": "Etiam elementum auctor tellus.", "ImageLink": "image1.jpg" }, { "Title": "Donor Business Professionalism Positioning", "ShortDescription": "Phasellus ultrices tellus at gravida tempor. Mauris in augue dolor. Pellentesque sit amet mauris vehicula, eleifend tellus eget, cursus lectus. Suspendisse sed convallis ex, non tristique tellus.", "ImageLink": "image1.jpg" }, { "Title": "Performance Work Preventing Workload Mergers Data Strategy", "ShortDescription": "Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Sed ut ipsum ac sapien mollis ultrices vehicula magna sed augue feugiat, eget interdum dui feugiat. Integer erat augue, lacinia vel ex a, consectetur lacinia nulla.", "ImageLink": "image1.jpg" }, { "Title": "Enterprise Compliance Introduction and", "ShortDescription": "Nullam cursus, leo in cursus feugiat, leo urna mollis dui, eu pretium augue orci ut lorem.", "ImageLink": "image1.jpg" }, { "Title": "Performance Combinations Continuous BPM Data Corporate", "ShortDescription": "Donec ornare nisi nec viverra lacinia. Ut in pharetra est. Suspendisse vestibulum, nisi eget bibendum porta, urna erat fermentum mi, ac efficitur turpis nisi ut lacus.", "ImageLink": "image1.jpg" }, { "Title": "and Building Spreadsheet International", "ShortDescription": "Phasellus odio arcu, lobortis vel dui et, tincidunt tristique mi. Aenean et malesuada nibh.", "ImageLink": "image1.jpg" }, { "Title": "Partnership Acquisitions Finance Teams for Gift Strategy", "ShortDescription": "Donec et arcu a augue sollicitudin congue. Ut suscipit, dui at ultrices convallis, purus mauris dignissim lacus, a dignissim dui justo eu turpis. Proin eget orci porttitor, convallis nibh sit amet, posuere lacus. Nunc vestibulum at ante sit amet dignissim. Curabitur quis quam tortor.", "ImageLink": "image1.jpg" }, { "Title": "for The Briefing Financial UK in", "ShortDescription": "Donec volutpat justo maximus lorem volutpat, eget aliquam dolor cursus. Maecenas porta fermentum rhoncus. Aliquam porttitor enim iaculis congue dignissim. Aenean at ante a nisl mattis efficitur. Morbi vulputate a lorem nec condimentum.", "ImageLink": "image1.jpg" }, { "Title": "Ideas Management Mapping Using Skills and", "ShortDescription": "Aliquam sollicitudin, nunc vitae laoreet mattis, justo ante congue tortor, nec tempus tellus metus consequat enim. Ut eget urna euismod, luctus augue laoreet, rutrum dui. Vivamus egestas eleifend arcu facilisis gravida.", "ImageLink": "image1.jpg" }, { "Title": "Career Negotiating Managing Buying change? your Tax", "ShortDescription": "Donec purus odio, bibendum in rutrum sit amet, tincidunt a justo. Curabitur quis blandit elit. Cras blandit felis scelerisque luctus vulputate. Etiam purus mauris, mattis bibendum metus a, vehicula consequat enim.", "ImageLink": "image1.jpg" }, { "Title": "Mergers and Assessing Accountants and Ethical the", "ShortDescription": "Donec vel neque consequat, tincidunt risus quis, sodales erat. Donec imperdiet urna in sollicitudin auctor. Donec tristique dolor vel elit pulvinar imperdiet. Nulla id nisi feugiat, tempus neque quis, dignissim augue.", "ImageLink": "image1.jpg" }, { "Title": "Solving Mergers Business", "ShortDescription": "Donec maximus suscipit tellus. Sed dolor metus, lobortis in ultricies eget, tincidunt in erat. Curabitur faucibus hendrerit ex in eleifend. Maecenas ligula mauris, bibendum vitae nisl eget, mattis consequat mi.", "ImageLink": "image1.jpg" }, { "Title": "Promoting for Basics Accounting", "ShortDescription": "Morbi sit amet diam a dui molestie venenatis ac vitae tortor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. ", "ImageLink": "image1.jpg" }, { "Title": "Building UK GAAP World", "ShortDescription": "Nunc consequat dictum rutrum.", "ImageLink": "image1.jpg" }, { "Title": "Principles New Professional Accountants", "ShortDescription": "Mauris luctus neque sit amet odio posuere porta. Aliquam interdum augue dui, at lobortis eros ultrices id. Donec mattis posuere dui vitae sagittis. Sed tempor aliquam nisi, vel semper odio.", "ImageLink": "image1.jpg" }, { "Title": "Transformation Charity Solving The Dynamic Guide", "ShortDescription": "Duis leo lectus, lacinia sodales semper eget, convallis ut nibh. In blandit orci lectus, at imperdiet urna posuere nec. Orci varius natoque penatibus et magnis dis parturient montes, nascetur ridiculus mus. Nunc vel urna quis est varius auctor.", "ImageLink": "image1.jpg" }, { "Title": "Megatrends and Advantage", "ShortDescription": "Morbi consequat eu magna quis bibendum.", "ImageLink": "image1.jpg" }, { "Title": "The Law Protection Control", "ShortDescription": "Proin lobortis, ante ut vestibulum posuere, tortor mauris iaculis nulla, ac commodo odio quam eu arcu. Suspendisse at fringilla purus, vitae pharetra ante. Suspendisse mattis rhoncus gravida. Etiam tincidunt elementum condimentum. Vivamus id sagittis erat, tincidunt tristique elit.", "ImageLink": "image1.jpg" }, { "Title": "Corporate Ethical", "ShortDescription": "Vivamus et vulputate ipsum, id vulputate nisl. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia Curae; Vivamus lacus risus, egestas nec magna ornare, aliquam luctus nibh. Morbi vel ullamcorper ex.", "ImageLink": "image1.jpg" }, { "Title": "Succession IFRS IFRS Cyber for Integrated and", "ShortDescription": "Mauris molestie nunc ut efficitur tincidunt. Quisque consectetur tincidunt lorem, sit amet semper purus pellentesque non. Pellentesque et volutpat sapien.", "ImageLink": "image1.jpg" }, { "Title": "for Reacting Understanding SME Results The", "ShortDescription": "Praesent ac sagittis purus. Etiam lacinia massa sed felis pulvinar, vitae consectetur tellus iaculis. Nullam quis vulputate turpis.", "ImageLink": "image1.jpg" }, { "Title": "Development with Accounting Issues and", "ShortDescription": "Maecenas non pellentesque neque. Donec maximus bibendum lectus vel eleifend. Nullam fringilla vitae ex vel eleifend. Nunc aliquet tempus sapien vitae consequat. Donec pretium ipsum ut nunc ornare, a tincidunt odio bibendum.", "ImageLink": "image1.jpg" }, { "Title": "Tips Financial Planning", "ShortDescription": "Proin congue semper fringilla. Cras risus ipsum, scelerisque sit amet nunc in, aliquam volutpat neque. Maecenas imperdiet nunc sed libero congue, non fringilla sapien ultricies.", "ImageLink": "image1.jpg" } ]; document.getElementById('courseImg').src=courses[1].ImageLink; document.getElementById('courseTitle').innerHTML = courses[1].Title; document.getElementById('descp').innerHTML = courses[1].ShortDescription; 

 body { width:100%; height:100%; } #courseImg { width:25%; height:50%; display:inline-block; } .course { width:70%; height:50%; display:inline-block; } 

 <div class="courses-list"> <h3>Courses</h3> <img id = "courseImg" src="" ></img> <div class="course"> <p id="courseTitle"> </p> <p id="descp"></p> </div> </div> 

希望這可以幫助