使用 Javascript 操作 DOM，对多个元素执行相同操作，无需复制粘贴

Question

我的代码几乎不想复制粘贴，而是想要一个简短的替代方法。

我有这 4 个元素，它们都应该被操作，我想在其中放置一个 Input 并编辑一些参数。

现在我想运行这 4 个中的每一个都使用相同的代码。

const tableTaskName = document.getElementById('taskName_' + taskID);
const tableStartTime = document.getElementById('startDate_' + taskID);
const tableEndTime = document.getElementById('endDate_' + taskID);
const tableStatus = document.getElementById('status_' + taskID);

以下是我使用 tableTaskName 的示例。 task 是我的函数采用的参数，是底部 tasks 数组的一项任务。 type 应该是 tableTaskName 和 tableStatus 的文本，对于 tableStartTime 和 tableEndTime，它应该是 time.

tableTaskName.innerHTML = ''
tableTaskName.textContent = task.taskName;
const inputTaskName = document.createElement('input');
inputTaskName.type = 'text';


var tasks = [{ 'id': 1, 'taskName': 'INIT', 'startDate': new Date('1970-01-01T00:00:00Z'), 'endDate': new Date('1970-01-01T00:00:10Z'), 'duration': new Date('1970-01-01T00:00:10Z'), 'status': 'RUNNING'}, 
                 { 'id': 2, 'taskName': 'INIT', 'startDate': new Date('1970-01-01T00:00:00Z'), 'endDate': new Date('1970-01-01T00:00:10Z'), 'duration': new Date('1970-01-01T00:00:10Z'), 'status': 'RUNNING'} ]

复制粘贴代码是唯一可行的方法吗？如果可能的话，我想没有那个。

Answer 1

U 只需获取元素并将它们作为参数传递给渲染函数。你可以通过添加这个或那个数据来随意操作每个元素。作为输出，您将获得这些项目的数组。

let x = document.querySelector('#taskName');
let y = document.querySelector('#taskName2');

renderElement = (...elements) => {
    elements.forEach(element => {
        const inputTaskName = document.createElement('input');
        inputTaskName.type = 'text';
        element.appendChild(inputTaskName)
    })
   return [elements];
}

console.log(renderElement(x, y))

Answer 2

在 JavaScript 中，您可以使用 document.getElementsByClassName().

获取元素数组

因此，如果您有多个具有相同 class 名称的元素，它将填充数组。然后遍历数组，它将代码应用于所有元素。

像这样：

<div class="divElement"></div>
<div class="divElement"></div>
<div class="divElement"></div>

<script>
    var elements = document.getElementsByClassName("divElement");

    for (var i = 0; i < elements.length; i++){
        // code to edit elements
    }
</script>

Answer 3

您可以创建一个包含属性个名称的数组，然后创建两个 for 循环来遍历属性和任务：

const props = ['taskName', 'startDate', 'endDate', 'status']

...

for (let task of tasks) {
  for (let prop of props) {
    const tableProp = document.getElementById(prop + '_' + task.id)
    tableProp.innerHTML = ''
    tableProp.textContent = task[prop]
    const inputTaskName = document.createElement('input')

    if (prop == 'startDate' || prop == 'endDate') {
      inputTaskName.type = 'time'
    } else {
      inputTaskName.type = 'text'
    }
    tableProp.appendChild(inputTaskName)
  }
}

这是一个工作示例。我只是假定 html 布局：

const props = ['taskName', 'startDate', 'endDate', 'status']

const tasks = [{
    id: 1,
    taskName: 'INIT',
    startDate: new Date('1970-01-01T00:00:00Z'),
    endDate: new Date('1970-01-01T00:00:10Z'),
    duration: new Date('1970-01-01T00:00:10Z'),
    status: 'RUNNING',
  },
  {
    id: 2,
    taskName: 'Another task name',
    startDate: new Date('1970-01-01T00:00:00Z'),
    endDate: new Date('1970-01-01T00:00:10Z'),
    duration: new Date('1970-01-01T00:00:10Z'),
    status: 'stopped',
  },
]

for (let task of tasks) {
  for (let prop of props) {
    const tableProp = document.getElementById(prop + '_' + task.id)
    tableProp.innerHTML = ''
    tableProp.textContent = task[prop]
    const inputTaskName = document.createElement('input')
    if (prop == 'startDate' || prop == 'endDate') {
      inputTaskName.type = 'time'
    } else {
      inputTaskName.type = 'text'
    }
    tableProp.appendChild(inputTaskName)
  }
}

/* Just for demo */

.task-block {
  background-color: lightgrey;
  padding: 4px;
}

.task-block p {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin: 4px;
}

<div class="task-block">
  <p id="taskName_1"></p>
  <p id="startDate_1"></p>
  <p id="endDate_1"></p>
  <p id="status_1"></p>
</div>

<br />

<div class="task-block">
  <p id="taskName_2"></p>
  <p id="startDate_2"></p>
  <p id="endDate_2"></p>
  <p id="status_2"></p>
</div>

使用 Javascript 操作 DOM，对多个元素执行相同操作，无需复制粘贴

Manipulate DOM with Javascript, do the same for multiple elements without copy paste

html

javascript

foreach