时间戳

首页 > 解决方案 > 循环遍历每个元素并将值添加到新对象。将这些对象添加到数组并访问它们的值

javascript - 循环遍历每个元素并将值添加到新对象。将这些对象添加到数组并访问它们的值

问题描述

我有一个名为的元素lineNumber，其中包含一些表单输入。输入的所有值都存储在变量中。

<div class="lineNumber">    
        <div class="input-container">
            <label>Example Line 1 :</label>
            <input type="text" name="lineText" value="John's Electrical" class="lineText">
        </div>
        <!-- more inputs... -->
    </div>

在页面加载时，有这个元素的一个实例。我lineNumber用一个按钮动态添加了新的实例。

在这个阶段，我已经检索了第一个实例的所有值，并将其放入更新 onchange 的变量中。挑战在于迭代每个新实例。

我想遍历每个实例lineNumber并将每个变量的值存储在一个对象中。我还希望在变量也更新时更新对象值。

我有 eventListeners 检测输入的变化并更新变量的值。

//wrap this in lineNumber.length loop?
let lineText = lineNumber[i].querySelector('.lineText');
let lineTextValue = lineNumber[i].querySelector('input[name="lineText"]').value;
//end of loop?

//add event listener and update lineTextValue
lineText.addEventListener("keyup", liveTextFunction);

//store value in variable lineTextValue;
function liveTextFunction(){
    lineTextValue = lineNumber[i].querySelector('input[name="lineText"]').value;    
}

//createLineObject() runs when new lineNumber element added
//store values *** //
let lineObject;
function createLineObject(){
    lineObject = { };
    lineObject[lineNumber] = lineNumberValue;
    lineObject[lineText] = lineTextValue;
};

希望以多个 lineObjects 结束，我可以从中访问值，例如

lineObject[1].lineNumberValue或者Object.entries(lineObject[1]);

不确定这些对象是否会进入一个数组？例如

objectArray[ lineObject[1], lineObject[2] ];

希望对如何实现这一目标或对我的方法提出建设性的批评提供一些指导。我只是不确定我是否以正确的方式接近这一点并且可以使用一些反馈。

标签： javascript

解决方案

<input/>您尝试查询的每个人都会有name="linetext"? 如果是这样，您可以遍历您的"lineNumber"div 并使用以下内容遍历"linetext"它们下面的输入：

lineObjects = Array.from(document.querySelectorAll('div.lineNumber')).map(div => {
  return Array.from(div.querySelectorAll('input[name="linetext"]')).map(input => {
    // do whatever you need to do with each div and input
    const lineObject = {
      div: div,
      input: input,
      value: null,  // set automatically by listener
      removeListener: null  // call when lineObject no longer needed
    };
    const listener = event => {
      lineObject.value = event.target.value;
    }
    input.addEventListener('keyup', listener);
    lineObject.removeListener = () => input.removeEventListener('keyup', listener);
    return lineObject;
  });
});
lineObjects = lineObjects.flat(); // convert array of arrays to flat array

顺便说一句，这已经很笨拙了，而且只针对一个功能。在lineNumber清理现有lineObjects. 如果可能的话，我建议使用像 React 这样的框架。

推荐阅读