Question

I am trying to make my javascript script more dynamic but I am not really use to work with it, so I need help figuring out is it possible to add counter to the property names?

So I would like this code:

var title1 = document.getElementsByClassName('requestRightsTitle1')[0].value;
var email1 = document.getElementsByClassName('requestRightsEmail1')[0].value;
var title2 = document.getElementsByClassName('requestRightsTitle2')[0].value;
var email2 = document.getElementsByClassName('requestRightsEmail2')[0].value;
var title3 = document.getElementsByClassName('requestRightsTitle3')[0].value;
var email3 = document.getElementsByClassName('requestRightsEmail3')[0].value;
var title4 = document.getElementsByClassName('requestRightsTitle4')[0].value;
var email4 = document.getElementsByClassName('requestRightsEmail4')[0].value;

to do something like:

var inputFields = [];

for (i = 1; i <= 5; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
       })
}

But i need this title and email to be title1, email1, title2, email2...

I tried:

for (i = 1; i <= 5; i++) {
    inputFields.push({
         'title'+i: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
         'email'+i: document.getElementsByClassName('requestRightsEmail'+i)[0].value
    })
}

and similar things like that, but no success. If there is a way to achieve that, please share your solution. Thanks in advance.

Answer 1

不需要在属性名称上加上数字后缀。您将属性放在不同的对象中，因此只需使用title和email，这样您的对象就会拥有一组一致的属性名称：

for (i = 1; i <= 5; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}

直播示例：

＆＃13;

var i;
var inputFields = [];
for (i = 1; i <= 3; i++) {
   inputFields.push({
       title: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       email: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}
console.log(inputFields);

＆＃13;

.as-console-wrapper {
  max-height: 100% !important;
}

＆＃13;

<input class="requestRightsTitle1" value="title 1">
<input class="requestRightsEmail1" value="email 1">
<br>
<input class="requestRightsTitle2" value="title 2">
<input class="requestRightsEmail2" value="email 2">
<br>
<input class="requestRightsTitle3" value="title 3">
<input class="requestRightsEmail3" value="email 3">

＆＃13;

但如果你真的有理由这样做：

使用ES2015 +语法，您可以使用计算属性名称：

for (i = 1; i <= 5; i++) {
   inputFields.push({
       ["title" + i]: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       ["email" + i]: document.getElementsByClassName('requestRightsEmail'+i)[0].value
   });
}

在ES5之前，您必须先创建对象，然后添加属性：

for (i = 1; i <= 5; i++) {
   var obj = {};
   obj["title" + i] = document.getElementsByClassName('requestRightsTitle'+i)[0].value;
   obj["email" + i] = document.getElementsByClassName('requestRightsEmail'+i)[0].value;
   inputFields.push(obj);
}

Answer 2

你可以这样做：

for (i = 1; i <= 5; i++) {
    var temp_title = "title"+i;
    var temp_email = "email"+i;
   inputFields.push({
       [temp_title]: document.getElementsByClassName('requestRightsTitle'+i)[0].value,
       [temp_email]: document.getElementsByClassName('requestRightsEmail'+i)[0].value
       })
}

Add counter to property names in javascript

2 个答案: