Question

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

我希望这个过程如下：

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

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

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

我希望菜单填充如下：

的奥斯卡心情：格劳奇颜色：绿色饼干怪兽心情：饿了颜色：蓝色

如果他们点击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

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

1 个答案: