javascript - 覆盖数组中的值

Question

尝试使用此 JSON/HTML 生成器，一旦用户将所有相应数据输入到输入字段中，该生成器将为用户显示 JSON 数据和关联的 HTML 元素。我知道问题是什么，但我不知道如何解决它。当我尝试生成 JSON 时，第一组 level_2_objName 中的值 被存储，然后移动到下一组 level_2_objName 中，因为该特定输入的 ID 名称被重置为 level_2_objName + j。您可以在此处看到控制台输出 => 有任何想法吗？我知道修复需要在 parseData()

的 for 循环内部进行

var categoryAmount 		= document.getElementById('category_amount');
var generateBtn 		= document.getElementById('generate_btn');
var parseBtn 			= document.getElementById('parse_btn');
var generatedInputs 	= document.getElementById('generated_inputs');
var generatedJson 		= document.getElementById('generated_json');
var parsedContainer 	= document.getElementById('container_parsed-html');
var totalCategoryAmount = parseInt(categoryAmount.value);

// create arrays and objects that will hold the JSON data
var AllLevelsArray = [];
var level_1_name_array = [];

function createInputs() {
	var listContainer = document.createElement('div');
	listContainer.className = 'list_container';

	var level_1_label = document.createElement('h3');
	level_1_label.textContent = 'Name of level-1 category #' + (i + 1);

	var level_1_name = document.createElement('input');
	level_1_name.className = 'form-control ' + 'level_1-name' + [i] + ' level_1';
	level_1_name.setAttribute('placeholder', 'Level-1 name');

	var level_2_list_label = document.createElement('h3');
	level_2_list_label.textContent = 'How many level 2 categories for #' + (i + 1);

	var level_2_list_amount = document.createElement('input');
	level_2_list_amount.className = 'form-control ' + 'level_2_list_amount' + [i] + ' level_2';
	level_2_list_amount.setAttribute('placeholder', 'How many level 2 categories?');
	level_2_list_amount.setAttribute('id', 'level_2_list_amount' + [i])

	var level_2_gen_btn = document.createElement('button');
	level_2_gen_btn.className = 'btn btn-default level_2-btn';
	level_2_gen_btn.textContent = 'Generate level 2';

	listContainer.appendChild(level_1_label);
	listContainer.appendChild(level_1_name);
	listContainer.appendChild(level_2_list_label);
	listContainer.appendChild(level_2_list_amount);
	listContainer.appendChild(level_2_gen_btn);
	generatedInputs.appendChild(listContainer);

	level_1_name_array.push(level_1_name);

	level_2_gen_btn.addEventListener('click', function() {

		for(i = 0; i < level_2_list_amount.value; i++) {
			var level_2_label = document.createElement('h4');
			level_2_label.textContent = 'Info for level 2 category #' + (i + 1);

			var level_2_name = document.createElement('input');
			level_2_name.className = 'form-control';
			level_2_name.setAttribute('id', 'level_2_name' + [i]);
			level_2_name.setAttribute('placeholder', 'level 2 name');

			var level_2_url = document.createElement('input');
			level_2_url.className = 'form-control';
			level_2_url.setAttribute('id', 'level_2_url' + [i]);
			level_2_url.setAttribute('placeholder', 'level 2 url');

			// save for after we finish storing data for level 2
			// var level_3 = document.createElement('input');
			
			listContainer.appendChild(level_2_label);
			listContainer.appendChild(level_2_name);
			listContainer.appendChild(level_2_url);
		}
		// this is for each individual level 2 generator button
		this.setAttribute('disabled', 'true');
	}, false)
}

function appendInputs() {
	totalCategoryAmount = parseInt(categoryAmount.value)
	console.log(totalCategoryAmount);

	generateBtn.setAttribute('disabled', 'true');

	for(i = 0; i < totalCategoryAmount; i++) {
		createInputs();
	}
}

function parseData() {
	for(var i = 0; i < totalCategoryAmount; i++) {
		var level_1_object = {};
		var level_2_list = [];
		
		var level_2_list_amount = document.getElementById('level_2_list_amount' + i);
		console.log(level_2_list_amount.value);

		level_1_object['level-1'] = level_1_name_array[i].value;

		for(var j = 0; j < level_2_list_amount.value; j++) {
			var level_2_objects = {};
			var level_2_objName = document.getElementById('level_2_name' + j);
			console.log(level_2_objName);
			console.log(level_2_objName.value);
			
			level_2_objects['L2-name'] = level_2_objName.value;
			level_2_list.push(level_2_objects);
			level_1_object['level-2-list'] = level_2_list;
		}

		AllLevelsArray.push(level_1_object);
	}
	console.log(AllLevelsArray);
	
	generated_json.textContent = JSON.stringify(AllLevelsArray, null, 4);
}

generateBtn.addEventListener('click', appendInputs, false);
parseBtn.addEventListener('click', parseData, false);

<div class="container header">
		<div class="row">
			<div class="col-xs-12">
				<img class="logo" src="img/nav-logo.png">
				<h1>Nav Generator</h1>
			</div>
		</div>

		<div class="row">
			<div class="col-xs-6">
				<h2>How it works</h2>
				<ol>
					<li>Enter the number of level-1 categories you will need</li>
					<li>Enter the number of respective you will need for level-2 and/or level-3 categories</li>
				</ol>
			</div>
			<div class="row">
				<div class="col-xs-6 generate_container">
					<form class="form-group">
						<label>How many Level-1 Categories do you need?</label>
						<input type="text" class="form-control" id="category_amount" placeholder="Category Amount">
						<button type="button" class="btn btn-default" id="generate_btn">Generate</button>
						<button type="button" class="btn btn-primary" id="parse_btn">Parse HTML</button>
					</form>
				</div>
			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-7" id="generated_inputs">

			</div>
			<div class="col-xs-5" id="generated_json">

			</div>
		</div>
	</div>

	<div class="container-fluid">
		<div class="row">
			<div class="col-xs-12" id="container_parsed-html">

			</div>
		</div>
	</div>

Answer 1

问题在于 2 级输入字段的选择。您可以通过 ID 选择它们:var level_2_objName = document.getElementById('level_2_name' + j);

j 从零开始，每个级别为 1。 id 在整个文档中必须是唯一的。如果创建两个具有相同 id 的元素，则会违反 html 标准。所有常见浏览器都接受它，但如果您选择一个 id，它每次都会返回具有该 id 的第一个元素。

解决方案 您的问题不需要 id。请改用 css 类或名称属性。一个 css 类可以在文档中多次使用，并且您可以选择其 css 类上的每个元素。与 name 属性相同。 name 属性提供了使用数组表示法的可能性:nameOfElement[]。所以你不需要对你的 id 进行连续编号(这从来都不是一个好主意，而且是不好的编码风格。如果你需要对你的 id 进行编号，大多数时候它表明了设计问题)。