jQuery 获取具有相同类的多个输入字段的值并添加到javascript对象中

声明:本页面是StackOverFlow热门问题的中英对照翻译,遵循CC BY-SA 4.0协议,如果您需要使用它,必须同样遵循CC BY-SA许可,注明原文地址和作者信息,同时你必须将它归于原作者(不是我):StackOverFlow 原文地址: http://stackoverflow.com/questions/15006208/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me): StackOverFlow

提示:将鼠标放在中文语句上可以显示对应的英文。显示中英文
时间:2020-08-26 14:12:57  来源:igfitidea点击:

Getting value of multiple input fields with same class and adding into javascript object

javascriptjqueryhtml

提问by BaconJuice

I am faced with a issue as follows:

我面临如下问题:

<input title="1" type="text" class="email">
<input title="2" type="text" class="email">
<input title="3" type="text" class="email">

Above is my html where I am trying to grab the emails of each input box and store it in an object with the title as key.

上面是我的 html,我试图在其中抓取每个输入框的电子邮件并将其存储在一个以标题为键的对象中。

Here is what my JavaScript currently looks like

这是我的 JavaScript 目前的样子

var emailObj = {};
$("input[class=email]").each(function() {

    var id = $(this).attr("title");
    var email = $(this).val()

    emailObj[id] = email;
});

Currently console.log displays only the last value added to the object as shown below.

当前 console.log 仅显示添加到对象的最后一个值,如下所示。

Object { 3="[email protected]"}

Where my expected result shouldbe as show below

我的预期结果应该如下所示

Object { 1="[email protected]", 2="[email protected]", 3="[email protected]"}

Could someone shed some light on this issue for me please?

有人可以帮我解释一下这个问题吗?

Thank you for reading, Regards.

感谢您的阅读,问候。

回答by Exception

Thereis no problem with your Code. And I would suggest you to write it as utility method

这里是您的代码没有问题。我建议你把它写成实用方法

function getValues(selector){
  var tempValues = {};
  $(selector).each(function(){
     var th= $(this);
     tempValues[th.attr('title')] = th.val();
   });
  return tempValues;
}

var values = getValues('.email');

or If you want values into an array

或者如果您想将值放入数组中

$('.email').map( function(){return $(this).val(); }).get();

.get()will convert it to a regular array.

.get()将其转换为常规数组。

The code you have written is absolutely correct. But when I have loaded it was returning me null, because at the time of execution, there were no values in textboxes.

你写的代码是绝对正确的。但是当我加载它时它返回 null,因为在执行时,文本框中没有值。

回答by James Donnelly

Your taskArrayis actually an object, not an array.

taskArray实际上是一个对象,而不是一个数组。

Replacing var taskArray = {}with this should fix the problem:

var taskArray = {}用这个替换应该可以解决问题:

var taskArray = new Array();

Edit:on second thoughts, what you have already is perfectly valid!

编辑:再想一想,您已经拥有的完全有效!

I'm editing my answer to echo what I've said in the comments: you'll need to debug using the console:

我正在编辑我的答案以回应我在评论中所说的内容:您需要使用控制台进行调试:

Within the .each(), put: console.log(id);- the expected result would be "1", "2", "3" - if it's just "3", it probably means that your other inputs aren't being picked up for whatever reason. If that is the result, print out the object after you've assigned the value: console.log(emailObj[id]);.

.each(), put 中:console.log(id);- 预期结果将是“1”、“2”、“3” - 如果它只是“3”,则可能意味着您的其他输入由于某种原因没有被接收。如果这是结果,则在分配值后打印出对象:console.log(emailObj[id]);