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

Question

I want to use the same jquery function and the same popup div in multiple location ( restaurant menu) and call up a different img in the popup. 我想在多个位置（餐厅菜单）中使用相同的jquery函数和相同的弹出div，并在弹出窗口中调用不同的img。 I have the popup working just fine. 我的弹出窗口正常工作。 But no matter what I try the function defaults to the first on the page. 但是无论我尝试什么，该功能默认为页面的第一个。 What am I doing wrong? 我究竟做错了什么？ pulling me hair out here? 把我的头发拉出来吗？

 <script> $( document ).ready(function() { $("#A1, #A2").click(function(){ $("#overlay").fadeIn("slow"); $("#overlay_div").fadeIn("slow"); }); $("#button-close").click(function(){ $("#overlay").fadeOut("slow"); $("#overlay_div").fadeOut("slow"); }); }); </script>

 <body> <div class="button-a"alt=""id="A1">PRESS</div> <div id="overlay"> <div class="overlay_div" id="overlay_div"> <div class="button-close" id="button-close">X</div> <img src="dsc_1064.png"style="margin:5% auto; display: block;" alt="" ></img> <h1>Malasadas...... Soo Good</h1> </div> </div> <div class="button-a"alt=""id="A2">PRESS</div> <div id="overlay"> <div class="overlay_div" id="overlay_div"> <img src="IMG_5718.jpg"style="margin:5% auto; display: block;" alt="" ></img> <h1>Come and Have Some Soup</h1> </div> </div> </body>

Answer 1

Your problems: 您的问题：

You cannot have duplicated ID's on the same page. 您不能在同一页面上重复ID。 The value must be unique within the HTML document. 该值在HTML文档中必须是唯一的。
There is no </img> end tag in HTML. HTML中没有</img>结束标签。
For readability, and to simplify production and debugging, try and stick to one type of classname/ID case formatting. 为了提高可读性，简化生产和调试，请尝试使用一种类型的类名/ ID大小写格式。 Here you have a mixture of my-classname (Kebab Case) and my_classname (Snake Case). 在这里，您混合了my-classname （Kebab Case）和my_classname （Snake Case）。 There is also myClassname (Camel Case) - choose one style and stick to it. 还有myClassname （驼峰式保护套）-选择一种样式并坚持使用。

I'd probably do something similar to this: 我可能会做类似的事情：

CSS: CSS：

.overlay_div { display: none; }

HTML: HTML：

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

Notice that I'm only using one overlay but it contains the content for two popups, overlay_div_a and overlay_div_b .. 请注意，我仅使用一个叠加层，但是它包含两个弹出窗口的内容， overlay_div_a和overlay_div_b 。

<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>

jQuery: jQuery的：

$("#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;
    }
});

JSFIDDLE DEMO JSFIDDLE演示

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

问题描述

1 个解决方案

解决方案1
0 2015-11-12 21:26:39

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

问题描述

1 个解决方案

解决方案1 0 2015-11-12 21:26:39

解决方案1
0 2015-11-12 21:26:39