1

我有一些代码可以接收字符串,将其转换为对象,并允许我通过表单进行编辑。我有一个导入函数,它允许我将另一个字符串引入同一个对象,并且我可以在我的 Web 表单上定位。

我正在尝试使用 DropDown 控件来允许我选择要在表单中查看的对象中的哪个属性。

我的问题是,一旦我将下拉菜单设置为我拥有的 3 个选项中的 1 个并单击 Import,但是创建目标属性需要多次,它会中断并且不允许我专注于其他属性。最好让我带你完成我的演示。

1. 在这里演示:http: //jsfiddle.net/vJBQq/1/
2. 将下拉菜单设置为“View_3”
3. 单击导入按钮 3 次,将填充表单 4. 在此阶段,它已动态创建 3 个属性“View_1”、“View_2”和“View_3”。而您正在查看 View_3。
5. 尝试使用下拉菜单来定位一个说 View_1。这没用。

在这个阶段我有两个问题。
一种)。下拉列表不针对任何其他属性
b)。现在表单已被填充,“导入”按钮也不再起作用。两个控件返回 -ReferenceError: Button is not defined

我做错了什么来打破这个。

我的代码':

    var cleanStr = '';
var viewDropDown;

$(document).ready(function() {
    //Import String
    $('#import').click(function() {
        ParseFunction();
    });

});

//--------------------Run Import Parse and Set String------------------------------

//Build Initial Object LIst

function ParseFunction(parameterOne) {

    $(document).on('change', '#selectView', function () {
        ParseFunction();
    });

    newStr = 'View{    Image    { BackgroundImage: Image.gif;        Position: 0, 0;        Width: 320;        Height: 480;    }    Button    { BackgroundImage: Button.gif;        Transition: View2;        Position: 49, 80;        Width: 216;        Height: 71;    }    Button    { BackgroundImage: Button2.gif;        Position: 65, 217;        Width: 188;        Height: 134;    }    Label    { Position: 106, 91;        Width: 96;        Height: 34;        Text: "Button";        FontSize: 32;        Color: 0.12549, 0.298039, 0.364706, 1;    }    Scroll    { Position: 106, 91;        Width: 96;        Height: 34;        Button{     BackgroundImage: Button2.gif;            Position: 65, 217;            Width: 188;            Height: 134;        }        Button{     BackgroundImage: Button2.gif;            Position: 65, 217;            Width: 188;           Height: 134;        }    }}' + ' ';

    str = cleanStr += newStr;
    // Set viewDropDown to current selectView State
    viewDropDown = $('#selectView').val();

    var i = {};
    str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
    str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
    str = str.replace(/;/g, ","); // swap out semicolons with commas
    str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
    str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
    str = str.replace(/"/g, ""); // get rid of all double quotes
    str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings
    //str = str.replace(/([^:]+):{/g, function(m, p1) { return p1 + "_" + (++i).toString() + ":{"; });
    str = str.replace(/(\S+):{/g, function (m, p1) {
        i[p1] = (i[p1] || 0) + 1;
        return p1 + "_" + i[p1].toString() + ":{";
    });
    //console.log(str);
    var objStr;
    eval("objStr={" + str + "};");
    //End Parse String
    console.log(objStr)


    $('#importCode').remove();
    var $objectList = $('<div id="importCode" />').appendTo($('#code'));

    $.each(objStr[viewDropDown], function (k, v) {
        $('<div/>').append(k).appendTo($objectList).on('click', function () {
            $('#options .wrapper').show();
            $('#options div div').hide();
            var $wrapper = $('#options .wrapper').empty();
            if (typeof v === 'string') {
                $('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
            } else { //object
                $('<h3 class="formHeading" />').append(k).appendTo($wrapper);
                $.each(v, function (key, val) {
                    $('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
                });
            }

            $("<button>Save</button>").appendTo($wrapper).on('click', function () {
                if (typeof v === 'string') {
                    v = $(this).closest(".wrapper").find("input").val();
                } else { //object
                    $(this).closest(".wrapper").find(".item").each(function (i, div) {
                        var $div = $(div),
                            key = $div.find(".key").text(),
                            val = $div.find("input").val();
                        v[key] = val;
                    });
                }
            });
        });
        cleanStrPre = JSON.stringify(objStr);
        cleanStr = cleanStrPre.substring(1,cleanStrPre.length-1);
        $('#print').append(cleanStr);

    });

};​
4

1 回答 1

0

我想到了。我没有尝试将其实现为单个函数,而是将它们分成 Parse into Object 函数和 Set form 函数。

这里的解决方案http://jsfiddle.net/vJBQq/2/

   var cleanStr = '';
var viewDropDown;
var objStr;

$(document).ready(function() {
    //Import String
    $('#import').click(function() {
        ParseFunction();
    });

});

//--------------------Run Import Parse and Set String------------------------------

//Build Initial Object LIst

function ParseFunction(parameterOne) {

    $(document).on('change', '#selectView', function () {
        setContent();
    });

    newStr = 'View{    Image    { BackgroundImage: Image.gif;        Position: 0, 0;        Width: 320;        Height: 480;    }    Button    { BackgroundImage: Button.gif;        Transition: View2;        Position: 49, 80;        Width: 216;        Height: 71;    }    Button    { BackgroundImage: Button2.gif;        Position: 65, 217;        Width: 188;        Height: 134;    }    Label    { Position: 106, 91;        Width: 96;        Height: 34;        Text: "Button";        FontSize: 32;        Color: 0.12549, 0.298039, 0.364706, 1;    }    Scroll    { Position: 106, 91;        Width: 96;        Height: 34;        Button{     BackgroundImage: Button2.gif;            Position: 65, 217;            Width: 188;            Height: 134;        }        Button{     BackgroundImage: Button2.gif;            Position: 65, 217;            Width: 188;           Height: 134;        }    }}' + ' ';

    str = cleanStr += newStr;
    // Set viewDropDown to current selectView State
    //viewDropDown = $('#selectView').val();

    var i = {};
    str = str.replace(/(\w+)\s*\{/g, "$1:{"); // add in colon after each named object
    str = str.replace(/\}(\s*\w)/g, "},$1"); // add comma before each new named object
    str = str.replace(/;/g, ","); // swap out semicolons with commas
    str = str.replace(/,(\s+\})/g, "$1"); // get rid of trailing commas
    str = str.replace(/([\d\.]+(, [\d\.]+)+)/g, "[$1]"); // create number arrays
    str = str.replace(/"/g, ""); // get rid of all double quotes
    str = str.replace(/:\s+([^\[\d\{][^,]+)/g, ':"$1"'); // create strings
    //str = str.replace(/([^:]+):{/g, function(m, p1) { return p1 + "_" + (++i).toString() + ":{"; });
    str = str.replace(/(\S+):{/g, function (m, p1) {
        i[p1] = (i[p1] || 0) + 1;
        return p1 + "_" + i[p1].toString() + ":{";
    });
    //console.log(str);
    objStr;
    eval("objStr={" + str + "};");
    //End Parse String
    console.log(objStr)


};

function setContent() {
    viewDropDown = $('#selectView').val();
    $('#importCode').remove();
    var $objectList = $('<div id="importCode" />').appendTo($('#code'));

    $.each(objStr[viewDropDown], function (k, v) {
        $('<div/>').append(k).appendTo($objectList).on('click', function () {
            $('#options .wrapper').show();
            $('#options div div').hide();
            var $wrapper = $('#options .wrapper').empty();
            if (typeof v === 'string') {
                $('<div class="item" />').append('<span class="key">' + k + '</span>' + '<input value="' + v + '"/>').appendTo($wrapper);
            } else { //object
                $('<h3 class="formHeading" />').append(k).appendTo($wrapper);
                $.each(v, function (key, val) {
                    $('<div class="item" />').append('<span class="key">' + key + '</span>' + '<input value="' + val + '"/>').appendTo($wrapper);
                });
            }

            $("<button>Save</button>").appendTo($wrapper).on('click', function () {
                if (typeof v === 'string') {
                    v = $(this).closest(".wrapper").find("input").val();
                } else { //object
                    $(this).closest(".wrapper").find(".item").each(function (i, div) {
                        var $div = $(div),
                            key = $div.find(".key").text(),
                            val = $div.find("input").val();
                        v[key] = val;
                    });
                }
            });
        });


    });
    cleanStrPre = JSON.stringify(objStr);
    cleanStr = cleanStrPre.substring(1,cleanStrPre.length-1);
    $('#print').append(cleanStr);
};​
于 2013-01-01T22:55:41.227 回答