Question

快速上下文：这是一个模拟磁性板的应用程序。我想保存所有可拖动元素的位置和ID，然后加载文件并设置这些属性并创建/删除缺少/不必要的元素。为了保存文件，我使用了Node.js和Electron。

我认为使用JSON是明智的，因为它可以直接从JS转换，但是如何使用未知数量的元素来做到这一点呢？

按下相应按钮时，此Javascript代码会将这些元素之一添加到我的页面中：

$("#item1").mousedown(function (e){

    var newpin = document.createElement("DIV");
    var pinimage = document.createElement("IMG");

    pinimage.setAttribute("src", "Media/2D_Container_Alfa.jpg");
    pinimage.setAttribute("id", "Alfa");
    pinimage.setAttribute("height", "70px");

    newpin.setAttribute("position","relative");
    newpin.setAttribute("top","20px");
    newpin.setAttribute("left","140px");
    newpin.setAttribute("display","block");

    newpin.setAttribute("class", "draggable ui-draggable ui-draggable-handle");
    newpin.appendChild(pinimage);
    document.body.appendChild(newpin);
});

$("#item2").mousedown(function (e){

    var newpin = document.createElement("DIV");
    var pinimage = document.createElement("IMG");

    pinimage.setAttribute("src", "Media/2D_Container_Bravo.jpg");
    pinimage.setAttribute("id", "Bravo");
    pinimage.setAttribute("height", "70px");

    newpin.setAttribute("class", "draggable ui-draggable ui-draggable-handle");
    newpin.appendChild(pinimage);
    document.body.appendChild(newpin);
});

-

Answer 1

您可以在任何可能缩小其范围的函数之外创建JSON变量，然后在需要时将其添加。

let myJson = {};

function onMouseDown(event) {
    let thisId = event.id;
    myJson[thisId] = location;
}

Answer 2

你是说

localStorage.setItem("draggable",JSON.stringify($('.draggable').map(function(){
  return this.id
}).get()));

或

$.post("saveonserver",{"data":JSON.stringify($('.draggable').map(
  function(){
    return this.id
  }).get()
});

如何将动态添加的元素转换为JSON并返回

2 个答案: