Javascript -使用下拉来瞄准对象属性在第一次使用后中断
Javascript - Using dropdown to target Object Property breaks after first use
我有一些代码,接受字符串,将其转换为对象,并允许我通过表单进行编辑。我有一个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);
};
相关文章:
- 相同的RegExp返回不同的结果-第一次是正确的结果,第二次是null
- 删除确认对话框在第一次单击时不起作用
- Javascript:JSON请求仅在第一次工作
- 推特引导:弹出窗口不会在第一次点击时出现,但会在第二次点击时显示
- 角度提交仅进行第一次v2错误
- 设置第一次执行的超时
- 为第一次尝试Javascript的经验丰富的开发人员提供建议
- jQuery on()-不;第一次点击时无法工作
- 第一次点击动态创建的表后,点击不工作
- 在Rails中第一次单击后禁用链接,Coffeescription
- PHP和JS脚本的奇怪问题,在我刷新页面之前第一次失败
- 循环中的切换脚本只适用于第一次迭代
- Kml层在刷新后工作正常,但给定typeError:无法读取属性getMap.第一次加载时
- 离子类型错误:第一次单击保存按钮时无法读取未定义的属性“标题”
- 强制移动设备在第一次触碰时激活:hover CSS属性,在第二次触碰时激活链接
- 查找属性的第一次出现(不需要精确匹配)
- 在Javascript中第一次访问时初始化属性
- 为什么自动对焦属性只在第一次试用时有效
- AngularJS属性未在第一次调用时绑定
- Javascript -使用下拉来瞄准对象属性在第一次使用后中断