javascript - 使用 Javascript 对象填充菜单，然后使用菜单创建 DOM 元素

Question

我正在使用 jQuery 和 jQuery UI 创建交互式 2D 沙箱/ Canvas 环境。我有一个预定义对象和属性的列表，我现在正在处理的本质上是一个“插入对象”按钮。

我想要的过程如下:

1. 用户点击“插入对象”
2. 弹出一个菜单，其中填充了我的对象列表及其属性
3. 用户单击其中一个对象名称，就会创建一个新的可拖动 Div，其中包含该对象的所有属性

例如，如果我有一个像这样的对象列表:

var items = 
  {
   item1:["Oscar",
   "Grouchy",
   "Green"],
    item2:["Cookie Monster",
    "Hungry",
    "Blue"]}

我希望菜单填充如下:

奥斯卡心情: 脾气暴躁颜色: 绿色 cookies 怪兽心情:饿了颜色:蓝色

如果他们点击 Cookie Monster，就会创建一个可拖动的 Div，其中包含一些将其标记为“Cookie Monster”的文本、蓝色背景以及一些关于它饥饿的信息(即，如果我后来创建了一些 cookie 对象，我会能够将它们拖到上面)。

jQuery UI 已经处理了拖放位。我有一些代码可以从对象列表中填充菜单。但是，我不确定如何根据原始列表创建具有属性的对象，总的来说，我觉得我没有以最有效的方式这样做。我现在拥有的内容如下:

    $( "button" )
    .button()
    .click(function() {
        $.each( items, function( key, value ) {    //items is my list of items
            $( "#dialog" ).append("<a href='#' class='NodeCreator'>"+value[0]+"</a>"+"<p>"+value[1]+"<p>"+"<p>Input: "+value[2]+"<p>"+"<p>Output: "+value[3]+"<p>");    //#dialog is the class of my menu
        });

        $(".NodeCreator").click(function(){    //I made the name of each object a link with id NodeCreator
            $( "<div id='draggable3' class='draggable ui-widget-content ui-draggable ui-draggable-handle' style='position: relative;'><p>Drag me around</p></div>" ).appendTo( "body" );    //NodeCreator creates a draggable DIV, but right now they're all identical.  I want them to be dependent on which link they click
            $( ".draggable" ).draggable();
        });
        $('#dialog').dialog('open');                        
});

那么我将如何让每个链接创建一个“知道”其自身属性的 Div，总的来说，是否有更好的方法来构建这一切？

谢谢!

Answer 1

我认为数据属性可能就是您正在寻找的:https://developer.mozilla.org/en-US/docs/Web/Guide/HTML/Using_data_attributes