자바 스크립트에서 클릭 가능한 ID를 사용하여 목록을 만드는 방법

Question

json 파일에서 배열 항목 목록을 구현하려고합니다. Google 플러스에서 찾은 목록을 더 많이 나열하지만 프로그래밍에 익숙하지 않고 수행 방법을 모릅니다. 그것 javascript.Please 도움을 사용하여. 나는 다음을 시도했지만 빈 페이지를 받고 메신저;

var records = { 
      "states": [ 
       { 
        "name": "johor", 
        "command": "view_johor" 
       }, 

       { 
        "name": "selangor", 
        "command": "view_selangor" 
       }, 

       { 
        "name": "melaka", 
        "command": "view_melaka" 
       }, 

       { 
        "name": "kuala lumpur", 
        "command": "view_kl" 
       }, 

       { 
        "name": "penang", 
        "command": "view_penang" 
       } 
      ] 
     }; 

     $.each(records.states, function (key, val) { 
      $('#ul').append($('<li>').text('name: ' + val.name + ', command: ' + val.command)); 
     }); 

및 HTML :

<ul id="ul"></ul> 

그리고 내가 목록 plugins.I이 핸들을 사용하여 JSON 파일의 목록을 표시 관리로 list.js 및 data.js 작동 방법을 이해 해달라고하지만 함께 포기 방법으로 couldnt 나는 핸들 막대에서 선택한 항목의 내용을 표시하는 onclick 항목을 알아낼 수 있습니다. 지금은 자바 스크립트를 사용하여 구식 방식으로하려고합니다.

Answer 1

예제에서 each() 함수를 사용했지만 사용자가 jQuery 태그를 지정하지 않았습니다. 그것은 순수한 자바 스크립트를 사용하도록 제안하는 간단한 경우입니다. 내가 각 항목에 대한 온 클릭 표시 명령을 클릭 할 어떻게

var records = {states:[{name:"johor",command:"view_johor"},{name:"selangor",command:"view_selangor"},{name:"melaka",command:"view_melaka"},{name:"kuala lumpur",command:"view_kl"},{name:"penang",command:"view_penang"}]}, 
 

 
    elem = document.getElementById('ul'); //get 'ul' element from the DOM 
 
     records.states.forEach(function(v) { //iterate over array in JSON 
 
     var li = document.createElement('li'); //create 'li' element 
 
     li.innerHTML = 'name: ' + v.name; //assign your data to each 'li' 
 
     elem.appendChild(li); //append 'li' to the 'ul' element 
 
    }); 
 
    
 
var elems = document.getElementsByTagName('li'); 
 
Array.from(elems).forEach((v,i) => v.addEventListener('click', function(){ 
 
    Array.from(elems).forEach((c,k) => {c.style.background = 'transparent'; c.innerHTML = 'name: ' + records.states[k].name;}); 
 
    this.innerHTML = 'name: ' + records.states[i].name + ', command: ' + records.states[i].command; 
 
    this.style.background = '#E3F6CE'; 
 
}));

<ul id="ul"></ul>