javascript - 如何调用/编辑在数组中找到的具有类名的所有 html 元素？

Question

我已经设法用我需要的名字创建了数组。根据用户对各种 html 元素(按钮)的点击，将这些名称从数组中推送或删除。

我正在尝试使用数组中收集的值来调用 html 元素的更改，这些元素的类名对应/匹配数组中的名称。

我已经设法创建了一个激活窗口警报的函数，该窗口警报允许我查看并验证我是否能够循环遍历数组中收集的所有元素。但是我卡住了。我不知道如何使用数组中的各个值/名称来调用特定的 html 元素类。

我试过:

for (var a = 0; a < array.length; a++) {
   document.getElelemntsByClassName(“.”+array[a]).classList.add(“new”);
//and//

   document.querySelectorAll(“.”+array[a]).classList.add(“new”); 
//none of them worked. So I wasn’t able to get through to the specific html elements.//

   window.alert(“.”+array[a]); 
//This responds properly. I can get multiple alerts, one at the time, with all the names I am expecting to see.//
}

预先感谢您的帮助。

Answer 1

我相信您想使用对象而不是数组，因为数组的索引会随着您删除元素而改变。也就是说，您甚至可能不需要该对象，具体取决于您要对元素执行的操作。在下面的代码片段中，我将 classNames 添加为一个对象以将其视为关联数组，例如:

// This is shared between two functions
const LIST_ITEM_SELECTOR = '.js-list-item'

// Get top-level elements
const listElement = document.querySelector('.js-list')
const listItemTemplate = document.querySelector('.js-list-item-template')
const addButton = document.querySelector('.js-add-button')
const logButton = document.querySelector('.js-log-button')

// Replaces "array" from your example
const classNames = {}

// Removes the list item from the list element (also delete from classNames)
const handleDelete = e => {
  const parentListItem = e.currentTarget.closest(LIST_ITEM_SELECTOR)
  const listItemId = parentListItem.dataset.id
  delete classNames[listItemId]
  parentListItem.remove()
}

// Updates after each "Add"
let nextId = 0

const handleAdd = () => {

  // Build new element from the template
  const newListItem = listItemTemplate.content
    .cloneNode(true)
    .querySelector(LIST_ITEM_SELECTOR)
  
  // Add class to the element and the "classNames" object
  const className = `id-${nextId}`
  newListItem.classList.add(className)
  classNames[nextId] = className
  
  // Add data-id
  newListItem.dataset.id = nextId
  
  // Update text
  newListItem.querySelector('.js-text').textContent = `Item Text ${nextId}`
  
  // Add delete event listener to the nested x button
  newListItem.querySelector('.js-x-button').addEventListener('click', handleDelete)
  
  // Append the newListItem to the end of the list
  listElement.appendChild(newListItem)
  
  // Prep the nextId for the next "Add" click
  nextId += 1
}

addButton.addEventListener('click', handleAdd)

logButton.addEventListener('click', () => {
  console.dir(classNames)
})

<button class="js-add-button">Add</button>

<ul class="js-list"></ul>

<template class="js-list-item-template">
  <li class="js-list-item">
    <span class="js-text">Item Text</span>
    <button class="js-x-button">x</button>
  </li>
</template>

<button class="js-log-button">Log Out Data</button>