时间戳

首页 > 解决方案 > 在javascript中为属性名称添加计数器

javascript - 在javascript中为属性名称添加计数器

问题描述

我正在尝试使我的 javascript 脚本更加动态，但我并没有真正使用它，所以我需要帮助弄清楚是否可以在属性名称中添加计数器？

所以我想要这段代码：

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;

做类似的事情：

var inputFields = [];

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

但我需要这个标题和电子邮件是 title1、email1、title2、email2...

我试过了：

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

和类似的事情，但没有成功。如果有办法实现这一点，请分享您的解决方案。提前致谢。

标签： javascriptcounter

解决方案

无需在属性名称上加上数字后缀。您将属性放在不同的对象中，所以只需使用titleand email，这样您的对象就有一组一致的属性名称：

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

现场示例：

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);
.as-console-wrapper {
  max-height: 100% !important;
}
<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">

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

使用 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);
}

推荐阅读