Javascript如何为从PHP foreach循环创建的一系列按钮创建切换按钮

我有一个图库程序，在每个图像上都有按钮。每个按钮都用于打开一个菜单，每个图像都是相同的菜单（这是一个简单的文件夹列表，可以将图像移动到其中）。 我有一个PHP foreach循环，它能够为每个按钮分配不同的js函数名，从而能够为每个图像分配一个切换按钮

我希望有人能说明如何实现更好的解决方案，而不是让foreach循环分配不同的函数名，如：

，

，等等。这是因为可能有多达200个不同的图像，这将需要编写多达200个不同的javascript函数

必须有另一种方法将相同的js函数分配给任何和所有分配的按钮

我的问题是，如果我只有一个函数；每当我点击第一张图片，菜单就会弹出，非常棒。但是，当我单击下面或任何其他图像的按钮时，它只会再次打开第一个图像上的菜单，而不会打开所选图像上的菜单

例如，我希望能够有：

，并且应该能够在图像的任何按钮上打开菜单

必须有一个更简单的解决方案，而不是写出200个js函数

提前谢谢

我的PHP代码：

<button onclick="toggle_pinit()" type="button" id="pinit_button"><img src="1.png"/></button>

---

首先，ID应该是唯一的。如果多个元素都应该有它，请使用一个类。然后，在HTML中直接使用JS并不是一个好的实践。将HTML与样式和脚本分开

beying说，我会这样做：

//等待文档加载
addEventListener（'DOMContentLoaded'，function（）{
//找到所有pin按钮并将它们放入可编辑的数组中
var pinBtns=Array.from（document.queryselectoral（'.pinit_按钮'）），
//找到菜单
pinMenu=document.getElementById（'pinit_菜单'），
//只是为了演示
pinSrc=document.getElementById（'src'），
selectedSrc=''；
//对于每个按钮
pinBtns.forEach（函数（btn）{
//倾听他们的点击声
btn.addEventListener（'click'，togglePin）；
});
//在这里你想干什么就干什么
功能切换销（e）{
//获取所单击图像的src
var newSrc=e.target.src；
//如果已选择，请关闭菜单
if（selectedSrc==newSrc）{
pinMenu.classList.remove（'open'）；
//重置图像src
selectedSrc=''；
//否则，请打开它
}否则{
pinMenu.classList.add（'open'）；
//在菜单文本中显示src
pinSrc.innerText=e.target.src；
//把它保存起来以后用
selectedSrc=newSrc；
}
}
});
正文{
字体大小：12px；
字体系列：Arial、Helvetica、无衬线字体；
}
.pinit_按钮{
光标：指针；
}
#拼音菜单{
利润率：1米0；
填充：.5em；
背景#0072ff；
颜色：#fff；
显示：无；
}
#pinit_菜单打开{
显示：块；
}
单击图像：

在这里，您可以做任何您需要的事情，知道您单击的图像具有以下src:
当我运行代码段时，用户单击一次图像，它显示pinit_菜单，然后用户再次单击同一图像，pinit_菜单消失。但当用户再次点击同一张图片时，什么也没发生。有可能让开关真正工作吗？顺便说一句，这是一个很棒的代码。它几乎可以工作，但我仍然有一个问题，那就是它只在第一个图像上工作，而切换只会反应一次。它不会关闭，也不会在除first之外的其他图像上工作。@非常抱歉，我把
togglePin
功能搞砸了。我想我把它修好了，告诉我这是否对你有用实际上我觉得它很好，只是菜单在同一个地方出现了。如果我安排菜单的话，应该没问题。但我会试试你的新开关。另外，foreach循环中应该有一个pinit_菜单div，这样每个图像都有自己的pinit_菜单div，可以打开，但我喜欢你的方法。用同一个div，把它居中。哦，好吧，我没有从你的问题中猜到
function toggle_pinit() 
{
    var button = document.getElementById('pinit_button');
    {
        var div = document.getElementById('pinit_menu'); // display select_show
        if (div.style.visibility == 'hidden') 
        {
            div.style.visibility = 'visible';
        }
        else 
        {
            div.style.visibility = 'hidden';
        }
    }
}