您可以通过单击元素将元素类列表分配给变量吗？

Question

我的主要问题是：有没有办法通过单击所述元素来将元素类列表分配给变量。

在此基础上，我尝试创建一个功能，在单击照片网格中的图像时，可以扩展图像，使人们看得更清楚。我做了一个 for 循环，它循环遍历一个数组，该数组包含网格中所有图像的类列表，其想法是，单击任何一个图像时，将调用包含循环的函数以及图像的类列表单击的将被存储为变量，然后循环会将数组中的每个值与变量进行比较，匹配后将应用一个放大该特定图像的类，这样我就可以对网格中的每个图像使用一个函数而不是编写 15 个以上的函数，其中每个函数都根据单击的图像进行调用。我在尝试检索所单击的图像的类列表时遇到了问题 - 那是我无法弄清楚如何通过单击所述元素来检索该元素的类列表。

正如我所说，我可以创建 15 个以上不同的函数，每个函数都有一个直接分配特定图像类的变量，但这似乎不是最好的方法。如果这不可能，也请告诉我。

我的 JS 现状：

function enlarge() {
    let figureArray = [] = document.querySelectorAll(".photo-grid figure");
    let figure = ; //This is where the class list of the clicked element would be stored
    for (let i = 0; i < figureArray.length; i++ ) {
        if (figureArray[i] === figure) {
            figureArray.item(i).classList.toggle("zoom"); 
        }
    }
};

Answer 1

文档似乎提供了一些选项。 您可以将整个类列表作为字符串获取：

document.querySelector('button').addEventListener('click', e => {
  const classes = e.target.classList.value;
  console.log(classes);
});

<button class="foo baz">click</button>

或者您可能想单独迭代列表：

document.querySelector('button').addEventListener('click', e => {
  const classes = [];

  for (const value of e.target.classList.entries()) {
    classes.push(value[1]);
  }
  
  console.log(classes);
});

<button class="foo baz">click</button>

在这些示例中，我只是从单击事件本身的

target

引用单击的元素。 想必您也有相同的选项，所显示的代码只是没有证明这一点。 如果此函数由单击事件调用，那么您可能至少应该将事件对象传递给此函数。 或者，如果您有其他方法来识别元素，也可以。