备注

• 如果可能的话，您希望只执行一次搜索或根本不执行搜索，这就是为什么您不应该将查询放在运行多次的函数中。
• 使用css类而不是直接修改样式，因为浏览器可以优化绘制，并减少布局偏移/计算。
• 要使我的JS工作，您需要添加以下css
  CSS格式

.machine__container {
  display: block;
}

.machine__container.hide {
  display: none;
}

JS

// Anonymous Function to contain variables
(() => {
    // Find all active Elements
    const filterMenu = [...document.getElementById("filter-btns").children];
    const filterItems = [...document.getElementsByClassName("machine__container")];
    const filterButtons = [...document.getElementsByClassName("machine__button")];

    // Process Click Event
    function handleAction({ currentTarget }) {
        const { target: targetId } = currentTarget.dataset;

        // Loop through menu items
        for (const menuElement of filterMenu) {
            const { target: menuId } = menuElement.dataset;
            if (targetId === menuId) menuElement.classList.add("active2");
            else menuElement.classList.remove("active2");
        }

        // Loop through data items
        for (const itemElement of filterItems) {
            const { id: menuId } = itemElement.dataset;
            if (targetId === "all" || menuId === targetId) itemElement.classList.remove("hide");
            else itemElement.classList.add("hide");
        }
    }

    // Add Event Listners to menu items
    for (const menuElement of filterMenu) {
        menuElement.addEventListener("click", handleAction);
    }

    // Add Event Listners to filter items
    for (const buttonElement of filterButtons) {
        buttonElement.addEventListener("click", handleAction);
    }
})();

无需对代码进行完整的重构，您可以向a[data-target]元素添加click侦听器，该侦听器将使用所需的样式更新相应的li[data-target]元素。
为了便于参考，下面是JS补充的内容：

const filters = document.querySelectorAll('li[data-target]')
const targets = document.querySelectorAll('a[data-target]')

for (const target of targets) {
  target.addEventListener('click', e => {
    const filterTarget = e.currentTarget.dataset.target
    const filter = document.querySelector(`li[data-target=${filterTarget}]`)

    for (const filter of filters) {
      filter.classList.remove('active2')
    }
    filter.classList.add('active2')
  })
}

第一个