将函数应用于具有类名的所有元素 - TypeScript

在 TypeScript 中，我们可以使用 DOM API 来从文档中获取元素并对其进行操作。如果我们想要对具有特定类名的所有元素应用相同的操作，可以使用以下代码：

function applyToElementsWithClass(className: string, func: (element: HTMLElement) => void) {
  const elements = document.querySelectorAll(`.${className}`);
  elements.forEach(func);
}

这个函数接受两个参数：类名和应用于每个元素的函数。它使用 document.querySelectorAll 方法获取具有给定类名的所有元素，并对它们应用提供的函数。

例如，如果我们想要隐藏所有类名为 my-class 的元素，可以这样做：

function hideElementsWithClass(className: string) {
  applyToElementsWithClass(className, (element) => {
    element.style.display = 'none';
  });
}

使用这个函数如下：

hideElementsWithClass('my-class');

这将隐藏所有具有 my-class 类名的元素。

我们也可以使用任何其他的函数来应用于每个元素。例如，如果我们想要改变类名为 my-class 的所有元素的颜色，可以创建以下函数：

function changeColorOfElementsWithClass(className: string, color: string) {
  applyToElementsWithClass(className, (element) => {
    element.style.color = color;
  });
}

使用这个函数如下：

changeColorOfElementsWithClass('my-class', 'red');

这将使所有具有 my-class 类名的元素变为红色。

总之，我们可以使用 TypeScript 中的 DOM API 来轻松地操作文档中的元素，而 applyToElementsWithClass 函数可以让我们更高效地对具有相同类名的元素应用相同的操作。