var listMenu = JSON.parse('{"List":[{"menutitle":"Module 1","mod":"1"},{"menutitle":"Module 2","mod":"2"},{"menutitle":"Module 3","mod":"3"},{"menutitle":"Module 4","mod":"4"},{"menutitle":"Module 5","mod":"5"}]}'),
\t listSlide = JSON.parse('{"List":[{"slidetitle":"Slide 1","mod":"1"},{"slidetitle":"Slide 2","mod":"1"},{"slidetitle":"Slide 3","mod":"1"},{"slidetitle":"Slide 4","mod":"1"},{"slidetitle":"Slide 5","mod":"2"},{"slidetitle":"Slide 6","mod":"2"},{"slidetitle":"Slide 7","mod":"3"},{"slidetitle":"Slide 8","mod":"3"},{"slidetitle":"Slide 9","mod":"3"},{"slidetitle":"Slide 10","mod":"4"},{"slidetitle":"Slide 11","mod":"4"},{"slidetitle":"Slide 12","mod":"5"},{"slidetitle":"Slide 13","mod":"5"},{"slidetitle":"Slide 14","mod":"5"},{"slidetitle":"Slide 15","mod":"5"}]}');
// this shorthand expression is same as `$(document).ready(function(){`, FYI, you don't have to write this over and over, once is enough.
$(function() {
\t // filter through the parent list that will make each list
\t $.each(listMenu.List, function(ind, arr) {
\t \t // basics to making an element object in jQuery:
\t \t // `$("<tagName />", { attributes: value })`
\t \t var a = $('<a />', { 'data-toggle': 'dropdown', href: 'javascript:void(0)' }).text(arr.menutitle), \t // create head link element \t // use of javascript:void(0) tends to be prefered over # unles u have specific purpose for such
\t \t \t span = $('<span />').appendTo(a), \t // create caret span & insert into our a tag
\t \t \t ul = $('<ul />') // create ul element
\t \t
\t \t // add Classes // only did this here for simplicity of view
\t \t // Just FYI, this can be done in one line when establish variable above.
\t \t // Return is always the jQuery Element Object
\t \t a.addClass('dropdown-toggle');
\t \t span.addClass('caret');
\t \t
\t \t // no need for an extra loop after this one, lets just loop through our sub list here
\t \t // quick and easy and you can associate better what belongs where without use of extra ID's and such
\t \t $.each(listSlide.List, function(slideInd, slideArr) {
\t \t \t if (slideArr.mod == arr.mod) { \t // check if item belongs in this list
\t \t \t \t var li = $('<li />').appendTo(ul), \t // create li element & insert into our list
\t \t \t \t \t liA = $('<a />', { href: 'javascript:void(0)' }).addClass('link').text(slideArr.slidetitle).appendTo(li); \t // create and append
\t \t \t }
\t \t });
\t \t
\t \t $('.test').append(a, ul);
\t });
\t
\t // Just for a little fun and further education, let's add some functionality!
\t // Here, I'll assign "events" to slide the list up and down,
\t // but the elements are added "dynamically", so I'll instead assign the events to
\t // a "static parent" (in this case the DOM) and associate what elements
\t // the event belongs to with my 2nd parameter.
\t // Read more about this here: http://api.jquery.com/on/
\t $(document)
\t \t .on('click', '.dropdown-toggle', function(e) {
\t \t \t // this is the HTML element,
\t \t \t // wrapping it in $() gives us jQuery object methods!
\t \t \t // Read about the .next method here: http://api.jquery.com/next/
\t \t \t // I use $.stop to stop and complete any animation in progress (multiclicking issues)
\t \t \t // Read about .stop here: http://api.jquery.com/stop/
\t \t \t // I use slideToggle to make the menu go up and down!
\t \t \t // Read about .slideToggle here: http://api.jquery.com/slideToggle/
\t \t \t $(this).next('ul').stop(true, true).slideToggle();
\t \t }) // finally, notice i did not close this `);`
\t \t \t // This is because I wanted to show you, you can use jQuery "chaining"
\t \t \t // to continue. So, if you wanted to add more events for other elements,
\t \t \t // you would just put a `.on(` and keep going, like so:
\t \t \t //
\t \t \t // $(document)
\t \t \t // .on('event', 'selector', function(e) {})
\t \t \t // .on('event', 'selector', function(e) {})
\t \t \t // .on('event', 'selector', function(e) {})
\t \t \t // .on('event', 'selector', function(e) {})
\t \t \t // .on('event', 'selector', function(e) {})
});
.test > a { display: block; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="test"></div>
份額預期輸出 –
https://jsfiddle.net/wdj7Ltc7/ ......我不看看這不工作？我可以給你一個答案，使它更好看的代碼和使用更多的jQuery功能，但輸出似乎是你的願望？ – SpYk3HH
使用JSON數據。我希望模塊按照這種方式填充：模塊1（幻燈片1,2,3,4），模塊2（幻燈片5,6），模塊3（幻燈片7,8,9）。等等使用mod數據或者我不知道的另一種技術：/ – dav