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:

  1. the input data arrays called "what*", 0 given number of arrays.
  2. the output folder-style type lists. also, these lists hidden , shown onclick.
  3. 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

Popular posts from this blog

javascript - Using jquery append to add option values into a select element not working -

Android soft keyboard reverts to default keyboard on orientation change -

jquery - javascript onscroll fade same class but with different div -