javascript - LocalStorage追加新元素

Question

他是:My First JSFiddle 。它只是附加 <li></li> 。它适用于 LocalStorage 并显示结果

$(".nav").append($("<li></li>").html(inputan));

我想要附加像 My Second JSFiddle :

var addFolder = '<li>' +
  '<div class="zf-folder">' +
    '<a></a>' +
  '</div>' +
'</li>';

$(".nav").append($(addFolder).html(inputan));

这适用于 LocalStorage，但重新加载页面时不会显示结果。我想使用这样的方法，因为我的代码如下所示:

使用追加方法$('.nav').append(addFolder);

如何使用第二个 jsFiddle 方法显示 LocalStorage 结果？

Answer 1

您的 submitButton 点击处理程序中有 addFolder，因此它仅在处理程序函数范围内可用。

$(".submitButton").click(function() {
  var inputan = $("#input_nameFolder").val();

 // move the below variable outside of this function 
  var addFolder = '<li>' +
    '<div class="zf-folder">' +
      '<a></a>' +
    '</div>' +
  '</li>';
  ...
});

将 addFolder 移到函数之外，它应该可以工作。

Updated your fiddle .

编辑:获取正确的索引

您可以添加一个函数，该函数返回带有当前/更新索引的 addFolder。相同的函数可用于页面加载时的首次渲染以及每次从输入添加项目时。

类似于:

var count = 1;
function getNewList() {
  var addFolder = '<li data-index="' + (count++) + '">' +
    '<div class="zf-folder">' +
    '<a></a>' +
    '</div>' +

    '</li>';
  return addFolder;
}

您可以在这里查看: Edited Fiddle for index

// check for the data-index on li items in the console