如何编写一个函数来处理多个 onclick 事件，从而切换字段的可见性

Question

我编码时间不长，而且我对 javascript 很陌生。我正在制作一个简单的网页，该网页将显示和隐藏句子的一部分，以达到学习外语的目的。有没有一种方法可以编写一个函数，当单击按钮时它会显示和隐藏该字段。

如果我使用 document.getElementsByClassName() 并迭代每个按钮并获取一组按钮，我不明白如何将该按钮数组提供给一个函数，该函数执行类似于下面这个函数的显示和隐藏。 （我知道下面使用的是 getElementById），但我尝试做同样的事情，但使用 document.getElementsByClassName()。

const a = document.getElementById("button1").addEventListener( "click" , function(){
  if(document.getElementById("para1").style.visibility === "hidden"){
    document.getElementById("para1").style.visibility = "visible";
  }else{
    document.getElementById("para1").style.visibility ="hidden";
  }

我已经看过这里已经提出的问题，但对于我想做的事情来说，它们似乎非常先进。我知道这是简单的事情，但我们将不胜感激。

我已经按照解释尝试了上述方法，但我似乎找不到如何将一个功能连接到多个按钮的示例。

Answer 1

可以尝试使用事件冒泡机制https://javascript.info/bubbling-and-capturing

1. 将事件放入顶级容器
2. 事件触发后找到按钮
3. 获取切换元素的id
4. 切换可见性

// https://jsfiddle.net/shiningfinger/b5uxcwpo/4/

const getControlElement = (element) => {
    if (
        element.tagName === "A" ||
        element.tagName === "BUTTON" ||
        (element.tagName === "INPUT" &&
            (element.type === "submit" || element.type === "button"))
    ) {
        return element;
    }

    const { parentElement } = element;
    if (!parentElement) return false;
    return getControlElement(parentElement);
};

document.addEventListener("click", (event) => {
    const controlElement = getControlElement(event.target);
    // put element id to data-toggling-element-id attribute
    const { togglingElementId } = controlElement.dataset;
    const togglingElement = document.getElementById(togglingElementId);

    if (!togglingElement) return;

    togglingElement.style.visibility =
        togglingElement.style.visibility !== "hidden" ? "hidden" : "visible";
});