Javascript -使用下拉来瞄准对象属性在第一次使用后中断

Javascript - Using dropdown to target Object Property breaks after first use

本文关键字:属性 第一次 对象 中断 Javascript      更新时间:2023-09-26

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

我正在尝试使用下拉控件,以允许我选择我想在窗体中看到的对象中的哪个属性。

我的问题是,一旦我将下拉菜单设置为3个选项中的1个,然后单击导入,但是创建目标属性需要很多次,它会中断,不允许我专注于不同的属性。我最好带你过一遍我的演示。

1. 这里的演示:http://jsfiddle.net/vJBQq/1/
2. 下拉设置为"View_3"
3.单击Import Button 3次,表单将被填充4. 在这个阶段,它已经动态地创建了3个属性"View_1"、"View_2"answers"View_3"。你现在看到的是View_3。
5. 尝试使用下拉菜单来定位View_1。

目前我有两个问题。
a).下拉菜单不针对任何其他属性
b).现在表单已经填充,Import按钮也不再工作了。返回- 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);
    });
};​

我明白了。我没有尝试将其实现为单个函数,而是将它们分离为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);
};​