Javascript 使用一个弹出窗口根据单击的按钮显示不同的内容

我想在多位置餐厅菜单中使用相同的jquery函数和相同的弹出div，并在弹出窗口中调用不同的img。我的弹出窗口工作得很好。但无论我尝试什么，函数默认为页面上的第一个。我做错了什么？把我的头发拔出来

$document.readyfunction{ $A1，A2.0单击功能{ $overlay.fadeInslow； $overlay_div.fadeInslow； }; $button-close.clickfunction{ $overlay.fadeOutslow； $overlay\U div.fadeOutslow； }; }; 按 X 马拉萨达斯。。。。。。太好了 按 来喝点汤吧 您的问题：

同一页上不能有重复的ID。该值在HTML文档中必须是唯一的。 HTML中没有结束标记。 为了便于阅读，并简化生产和调试，请尝试使用一种类型的classname/ID大小写格式。这是我的类名烤肉串盒和我的类名蛇盒的混合物。还有myClassname驼峰案例-选择一种样式并坚持它。 我可能会做类似的事情：

CSS:

HTML:

jQuery：

---

同一页上不能有多个元素使用同一ID。谢谢您的回答和输入。不过我还是很困惑。从我所看到的来看，这需要我为每个按钮写一个div，即：button-a、button-b等。。。。。。我有40多个项目中添加到这个。这不会使我的样式表有点过大。有没有办法做到最好。谢谢你的置评。我已经把它们移走了

.overlay_div { display: none; }

<div class="button-a" id="A1">PRESS</div>
<div class="button-b" id="A2">PRESS</div>

<div id="overlay">
    <div class="overlay_div" id="overlay_div_a">
        <div class="button-close" id="button-close">X</div>
        <img src="dsc_1064.png">
        <h1>Malasadas...... Soo Good</h1>
    </div>
    <div class="overlay_div" id="overlay_div_b">
        <div class="button-close" id="button-close">X</div>
        <img src="dsc_5718.png">
        <h1>Come and Have Some Soup</h1>
    </div>
</div>

$("#A1, #A2").click(function() {
    // close current overlay content
    $('.overlay_div').hide();
    // get the classname of the button pressed
    var class = $(this).attr('class');
    // show relevant overlay content for button pressed
    switch (class) {
        case "button-a":
            $('#overlay_div_a').show();
            break;
        case "button-b":
            $('#overlay_div_b').show();
            break;
    }
});