如何使用本地存储中的数据元素将 <li> 添加到 <ul>

Question

因此，我尝试创建一个输入列表，其中包含从对象数组中获取的唯一值。但由于某种原因，它只迭代一次并停止。function loadLayer() {//Get the object from local storagevar project = JSON.parse(localStorage.getItem('project'));var projectLayers = project.layersfor (var x = 0; x < projectLayers.length; x++) {    var x = createLayer(projectLayers[x].name)    appendLayer(x)  }}所以项目层基本上是一个数组[{id=1,name="bob},{id=2,name="kevin"}]function createLayer(name) {  var li = document.createElement("li");  li.className = "list-group-item"  var x = document.createElement("INPUT")  x.setAttribute("type", "text")  x.setAttribute("value", name)  li.appendChild(x)  return li}function appendLayer(layer) {  var layerList = document.getElementById("layerList")  layerList.appendChild(layer)}而appendlayer只是将li添加到ul然而，在我运行该程序后，我只有一个里面有一个包含 bob 的输入。另一个没去哪里。我尝试打印以查看是否调用了第二个循环，但似乎没有。我不知道为什么，被困了几个小时。

Answer 1

就像您被告知的那样，您需要小心命名变量的方式。其次，我还建议使用let而不是var。因为您可以轻松地覆盖在其初始范围之外使用var声明的变量。

现在到您的代码： 我对您的代码进行了一些编辑，尤其是loadLayer 函数，并将两个名称附加到列表中：

<script>

    let projectList = [

        {

            id:1,

            name:"bob"

        },

        {

            id:2,

            name:"kevin"

        }

    ]

    function loadLayer() {

        window.localStorage.setItem('project', JSON.stringify(projectList));

        let p = JSON.parse(window.localStorage.getItem('project'));

        for (let i = 0; i < p.length; i++) {

            let projectName = createLayer(p[i].name)

            appendLayer(projectName)

        }

    }

    function createLayer(name) {

        let li = document.createElement("li");

        li.className = "list-group-item"

        let x = document.createElement("INPUT")

        x.setAttribute("type", "text")

        x.setAttribute("value", name)

        li.appendChild(x)

        return li

    }

    function appendLayer(layer) {

        let layerList = document.getElementById("layerList")

        layerList.appendChild(layer)

    }

    loadLayer()

</script>

Answer 2

您将循环中迭代的变量命名为 as ，x如果var x = createLayer(projectLayers[x].name)与它发生冲突，请更改其中之一。