javascript - 如何在 javascript 中创建具有可点击 id 的列表

Question

我正在尝试从 json 文件实现数组项列表，更多列出您在 google plus 上找到的列表，但我是编程新手，不知道如何使用 javascript 来实现。请帮忙。我尝试了正在关注，但我收到一个空白页；

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>

我不明白 list.js 和 data.js 如何作为列表插件工作。我设法使用 Handlebars 显示 json 文件中的列表，但由于无法弄清楚所选项目的 onclick 项目显示内容而放弃了在 Handlebars 中。现在我正在尝试使用 javascript 以老式方式进行操作。

Answer 1

您在示例中使用了 each() 函数，但没有标记 jQuery。这是一个非常简单的情况，我建议您使用纯 JavaScript。

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>