[英]How to get data from multiple inputs and output them as string in jQuery
OK so I have a bunch of inputs like so: 好的,所以我有很多输入,例如:
<input type="number" name="quantity" value="0" data-id="100">
<input type="number" name="quantity" value="1" data-id="101">
<input type="number" name="quantity" value="2" data-id="102">
<input type="number" name="quantity" value="3" data-id="103">
<input type="number" name="quantity" value="0" data-id="104">
<button data-ids=""></button>
I want to loop through these and get the data-id and value from inputs that have a value more than 0 and output it to the buttons data-ids attribute like so: 我想遍历这些并从具有大于0的值的输入中获取data-id和值,然后将其输出到按钮data-ids属性,如下所示:
<button data-ids="101:1,102:2,103:3"></button>
Here is the code i have so far: 这是我到目前为止的代码:
$('input').each( function(){
var input = $(this);
// Check quantity is more than 0
if ($(input).val() > '0'){
var output = input.attr('data-id') + ':' + input.val();
console.log(output);
$('button').attr('data-ids', output);
}
});
This seems to output the data in the console but only outputs the last input in the button. 这似乎是在控制台中输出数据,但仅输出按钮中的最后输入。
You need to concatenate to your data-ids
every time which you don't do. 您每次都需要连接到您的
data-ids
。 Each item replaces the previous one. 每一项都替换前一项。
var dataIds = $('button').attr('data-ids') + output;
$('button').attr('data-ids', dataIds );
But with this approach you don't get the ,
in the output. 但是,使用这种方法,你没有得到
,
在输出中。
Try this approach. 试试这种方法。 Push into the array and then
join
the items by ,
. 推入数组,然后
join
由项目,
。
Code 码
var output = []; $('input').each( function(){ var input = $(this); if ($(input).val() > '0'){ output.push(input.attr('data-id') + ':' + input.val()); } }); $('button').attr('data-ids', output.join(',')); console.log($('button').attr('data-ids'));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" name="quantity" value="0" data-id="100"> <input type="number" name="quantity" value="1" data-id="101"> <input type="number" name="quantity" value="2" data-id="102"> <input type="number" name="quantity" value="3" data-id="103"> <input type="number" name="quantity" value="0" data-id="104"> <button data-ids=""></button>
You need to build the output iteratively, via concatenation, and apply it outside the loop. 您需要通过串联来迭代构建输出,并将其应用到循环外。
var output = [];
$('input').each( function(){
var input = $(this);
if ($(input).val() > '0')
output.push(input.attr('data-id') + ':' + input.val());
});
$('button').attr('data-ids', output.join());
Here you go with a solution 在这里你有一个解决方案
var output = ""; $('input').each( function(){ var input = $(this); // Check quantity is more than 0 if ($(input).val() > '0'){ output += input.attr('data-id') + ':' + input.val() + ","; } }); console.log(output); $('button').attr('data-ids', output.substr(0, output.length - 1));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <input type="number" name="quantity" value="0" data-id="100"> <input type="number" name="quantity" value="1" data-id="101"> <input type="number" name="quantity" value="2" data-id="102"> <input type="number" name="quantity" value="3" data-id="103"> <input type="number" name="quantity" value="0" data-id="104"> <button data-ids=""></button>
You need to concatenate comma at the end of each loop item & need to remove the last comma as well. 您需要在每个循环项的末尾连接逗号 ,还需要删除最后一个逗号 。
Hope this will help you. 希望这会帮助你。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.