根据元素数量追加到数组 [英] Appending to an array depending on amount of elements
本文介绍了根据元素数量追加到数组的处理方法，对大家解决问题具有一定的参考价值，需要的朋友们下面随着小编来一起学习吧！
问题描述
这里是我的代码：
$ b
<！DOCTYPE html>
p>当只有一行时，代码正在以我想要的格式输出数组时正常工作。但是，当有多行时，它会使用不同的变量再次输出相同的行。
我希望它看起来像这样：
例如，如果这是输入
我希望输出看起来像这样：
提交
您的数组是：[{posx：1，posy： - 1，text：test1}，{posx： - 0.1， posy：0.05，text：test2}]
我希望输出看起来像这样：
p> 提交
您的数组是：[{posx：1，posy： - 1，text：test1 }，{ POSX： - 0.1 POSY：0.05， 文本： TEST2}，{ POSX： - 0.3 POSY：0.25， 文本： TEST3}]
我怎样才能使输出为lo好的，这取决于行的数量？
所有帮助表示赞赏，谢谢。
解决方案
打印之前，您需要将输出保存到数组中。见下面。
<！DOCTYPE html>< html><头> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> < /脚本> <脚本> $（＃submitBtn）。on（click，submitted）; $（.add-row-btn）on（click，function（evt）{evt.preventDefault（ ）; evt.stopPropagation（）; $（。container）。append（createNewRow（））;}）$（。remove-row-btn）on（click，function（evt）{evt。 （）.define（）; $（'。container div'）。eq（$（。container div）。length（1）.remove（）;}）$（'＃amount'）。on （'change'，function（）{var containerEl = $（。container）; containerEl.empty（）; var startingNumberOfLines = parseInt（$（＃amount）.val（））; for（var i = 0 ; i< startsNumberOfLines; i ++）{$（。container）。append（createNewRow（））;}}）; $（。add-row-btn）。trigger（click）;}）var createNewRow = function（）{var lineTitleEl = $（< input>）。attr（placeholder，enter text here）.addClass（line-title）; var labelEl = $（< label>）; var inputEl = $（< input>）。attr（step，0.05）。attr（type，number）.addClass（line-number）; var firstNumberEl = labelEl.clone（）; firstNumberEl.text（posx：）.attr（class，first-number-el）。append（inputEl.clone（））; var secondNumberEl = labelEl.clone（）; secondNumberEl.text（poxy：）.attr（class，second-number-el）。append（inputEl.clone（））; var newRowEl = $（< div>）。append（lineTitleEl，firstNumberEl，secondNumberEl）;返回newRowEl; } function submit（）{console.log（submitted）; var output = []; $（。container）。children（div）。each（function（）{var title = $（this）。 find（。line-title）.val（）; var firstNum = $（this）.find（。first-number-el input）.val（）; var secondNum = $（this）.find（ .second-number-el input）。val（）; output.push（{posx：firstNum，posy：secondNum，text：title}）;}）; console.log（'your array is ：'+ JSON.stringify（output））;}< / script> <风格> .line-title {width：259px; margin：0px; height：15px;清楚：离开; } .line-number {width：45px; } .container {margin：10px; }< /风格> < script src =https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js> < /脚本> <标题>< /标题>< /头><身体GT; <形式> < fieldset style =margin：0 0 5px 0;> <！ - < div>输入文本数量+数字框：< input id =amountstep =1style =width：45px; type =numbervalue =1> < / DIV> - > < div class =container>< / div>< button class =add-row-btn>添加行< / button> < button class =remove-row-btn>删除行< / button> < input class =buttonid =submitBtnstyle =margin-left：85％; type =buttonvalue =提交> < /字段集> < / form>< / body>< / html>
here is my code currently:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(function() {
$("#submitBtn").on("click", submitted);
$(".add-row-btn").on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
$(".container").append(createNewRow());
})
$(".remove-row-btn").on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
$(".container div").eq($(".container div").length - 1).remove();
})
$('#amount').on('change', function() {
var containerEl = $(".container");
containerEl.empty();
var startingNumberOfLines = parseInt($("#amount").val());
for (var i = 0; i < startingNumberOfLines; i++) {
$(".container").append(createNewRow());
}
});
$(".add-row-btn").trigger("click");
})
var createNewRow = function() {
var lineTitleEl = $("<input>").attr("placeholder", "enter text here")
.addClass("line-title");
var labelEl = $("<label>");
var inputEl = $("<input>").attr("step", "0.05").attr("type", "number")
.addClass("line-number");
var firstNumberEl = labelEl.clone();
firstNumberEl.text("posx: ").attr("class", "first-number-el").append(inputEl.clone());
var secondNumberEl = labelEl.clone();
secondNumberEl.text("poxy: ").attr("class", "second-number-el").append(inputEl.clone());
var newRowEl = $("<div>").append(lineTitleEl, firstNumberEl, secondNumberEl);
return newRowEl;
}
function submitted() {
console.log("submitted");
$(".container").children("div").each(function() {
var title = $(this).find(".line-title").val();
var firstNum = $(this).find(".first-number-el input").val();
var secondNum = $(this).find(".second-number-el input").val();
console.log('your array is: [{"posx":'+ firstNum + ',"posy":' + secondNum+',"text":"'+ title +'"}]');
})
}
</script>
<style>
.line-title {
width: 259px;
margin: 0px;
height: 15px;
clear: left;
}
.line-number {
width: 45px;
}
.container {
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<title></title>
</head>
<body>
<form>
<fieldset style=" margin: 0 0 5px 0;">
<!--<div>enter amount of text + number boxes:
<input id="amount" step="1" style=" width: 45px;" type="number" value="1">
</div>-->
<div class="container"></div><button class="add-row-btn">Add row</button> <button class="remove-row-btn">Remove row</button> <input class="button" id="submitBtn" style="margin-left: 85%;" type="button" value="Submit">
</fieldset>
</form>
</body>
</html>
When there is only 1 row, the code is working correctly as the array is being outputted in the format I would like. However, when there are multiple rows, it outputs the same line again with different variables.
I would like it to look like this:
For example if this was the input
I would like the output to look like this:
submitted
your array is: [{"posx":1,"posy":-1,"text":"test1"},{"posx":-0.1,"posy":0.05,"text":"test2"}]
Another example, if there were 3 rows like so
I would like the output to look like this:
submitted
your array is: [{"posx":1,"posy":-1,"text":"test1"},{"posx":-0.1,"posy":0.05,"text":"test2"},{"posx":-0.3,"posy":0.25,"text":"test3"}]
How can I make the output look like this depending on the amount of rows?
All help is appreciated, thanks.
解决方案
You will need to save the outputs into an array before printing them. See below.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(function() {
$("#submitBtn").on("click", submitted);
$(".add-row-btn").on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
$(".container").append(createNewRow());
})
$(".remove-row-btn").on("click", function(evt) {
evt.preventDefault();
evt.stopPropagation();
$(".container div").eq($(".container div").length - 1).remove();
})
$('#amount').on('change', function() {
var containerEl = $(".container");
containerEl.empty();
var startingNumberOfLines = parseInt($("#amount").val());
for (var i = 0; i < startingNumberOfLines; i++) {
$(".container").append(createNewRow());
}
});
$(".add-row-btn").trigger("click");
})
var createNewRow = function() {
var lineTitleEl = $("<input>").attr("placeholder", "enter text here")
.addClass("line-title");
var labelEl = $("<label>");
var inputEl = $("<input>").attr("step", "0.05").attr("type", "number")
.addClass("line-number");
var firstNumberEl = labelEl.clone();
firstNumberEl.text("posx: ").attr("class", "first-number-el").append(inputEl.clone());
var secondNumberEl = labelEl.clone();
secondNumberEl.text("poxy: ").attr("class", "second-number-el").append(inputEl.clone());
var newRowEl = $("<div>").append(lineTitleEl, firstNumberEl, secondNumberEl);
return newRowEl;
}
function submitted() {
console.log("submitted");
var output = [];
$(".container").children("div").each(function () {
var title = $(this).find(".line-title").val();
var firstNum = $(this).find(".first-number-el input").val();
var secondNum = $(this).find(".second-number-el input").val();
output.push({
"posx": firstNum,
"posy": secondNum,
"text": title
});
});
console.log('your array is: ' + JSON.stringify(output));
}
</script>
<style>
.line-title {
width: 259px;
margin: 0px;
height: 15px;
clear: left;
}
.line-number {
width: 45px;
}
.container {
margin: 10px;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<title></title>
</head>
<body>
<form>
<fieldset style=" margin: 0 0 5px 0;">
<!--<div>enter amount of text + number boxes:
<input id="amount" step="1" style=" width: 45px;" type="number" value="1">
</div>-->
<div class="container"></div><button class="add-row-btn">Add row</button> <button class="remove-row-btn">Remove row</button> <input class="button" id="submitBtn" style="margin-left: 85%;" type="button" value="Submit">
</fieldset>
</form>
</body>
</html>
这篇关于根据元素数量追加到数组的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
查看全文
