javascript - Populating lists with links from arrays - Code Review Stack Exchange
i have following configuration:
$('document').ready(function () { var what0 = [ ["http://validator.w3.org/unicorn/", "unicorn"], ["http://validator.w3.org/", "w3c validation service"], ["http://jigsaw.w3.org/css-validator/", "w3c css validator"], ["http://text-compare.com/", "text compare!"] ], what1 = [ ["https://imgflip.com/", "imgflip.com"], ["http://jpillora.com/base64-encoder/", "base64 encoder"], ["http://www.showmycode.com/", "adobe flash decompiler"], ["http://jsbeautifier.org/", "beautify js"] ], what2 = [ ["http://plnkr.co/edit/?p=catalogue", "plunker"], ["http://www.css3maker.com/index.html", "css3 generator"], ["http://daneden.github.io/animate.css/", "animate.css"], ["http://site.youidraw.com/", "youdraw"] ], what3 = [ ["http://realfavicongenerator.net/", "favicon generator"], ["http://grabicon.com/", "grabicon"], ["http://www.buildmypinnedsite.com/en", "windows 8.1 tile"], ["https://kraken.io/web-interface", "kraken.io"] ], what4 = [ ["http://ideone.com/rran1v", "c++0x compiler"], ["http://webcompiler.cloudapp.net/", "online c++ compiler"], ["http://www.color-hex.com/", "color hex"], ["https://icomoon.io/app/#/select", "icomoon app"] ], wh = [what0, what1, what2, what3, what4]; function toggle(elem) { var hiding = document.getelementbyid("hiding" + elem), buttonforhiding = document.getelementbyid("buttonforhiding" + elem); $(hiding).hide(); $(buttonforhiding).click(function () { $(hiding).toggle(); }); } (var = 0; <= 4; a++) { toggle(a.tostring()); } function populate(one, two) { var = document.getelementbyid("hiding" + one), = two, length = what.length - 1; (var b = 0; b <= length; b++) { var vector = what[b]; $(where).append('<li><a href="' + what[b][0] + '" target="_blank">' + what[b][1] + '</a></li>'); } } (var c = 0; c <= 4; c++) { var d = wh[c]; populate(c, d); } });
ul { list-style-type:none; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <ul> <li> <div id="buttonforhiding0">folder 1</div> </li> <li> <ul id="hiding0"></ul> </li> <li> <div id="buttonforhiding1">folder 2</div> </li> <li> <ul id="hiding1"></ul> </li> <li> <div id="buttonforhiding2">folder 3</div> </li> <li> <ul id="hiding2"></ul> </li> <li> <div id="buttonforhiding3">folder 4</div> </li> <li> <ul id="hiding3"></ul> </li> <li> <div id="buttonforhiding4">folder 5</div> </li> <li> <ul id="hiding4"></ul> </li> </ul>
its role populate lists links in what0
, what1
, what2
, etc. arrays. working fine, interested if can come code more efficient.
the requirements are:
- the input data arrays called "what*", 0 given number of arrays.
- the output folder-style type lists. also, these lists hidden , shown onclick.
- the script must using javascript , jquery.
your what
variable more accessible if javascript object
(w3school javascript objects), instead of list of lists.
var what_object = { "what": [ [ { "link": "http://validator.w3.org/unicorn/", "text": "unicorn" }, { "link": "http://validator.w3.org", "text": "w3c validation service" }, { "link": "http://jigsaw.w3.org/css-validator/", "text": "w3c css validator" }, { "link": "http://text-compare.com/", "text": "text compare!" } ], [ { "link": "https://imgflip.com/", "text": "imgflip.com" }, { "link": "http://jpillora.com/base64-encoder/", "text": "base64 encoder" }, { "link": "http://www.showmycode.com/", "text": "adobe flash decompiler" }, { "link": "http://jsbeautifier.org/", "text": "beautify js" } ] ] };
i have done indexes 0
, , 1
.
jquery.fn.loadwhatlist = function(list_location) { if (number(list_location) >= 0) { var selected_list_section = what_object.what[list_location]; if (typeof(selected_list_section) === 'undefined') { return false; }; (var y = 0; y < selected_list_section.length; y++) { var selected_link = selected_list_section[y]; // selected link var compiled_link = jquery("<li><a></a></li>"); compiled_link.find('a').attr('href', selected_link.link); compiled_link.find('a').html(selected_link.text); // can of click events in here too... compiled_link.click(function(e) { jquery(this).toggle(); }); // load compiled_link element jquery(this).append(compiled_link); }; return true; }; return false; };
Comments
Post a Comment