Question

我想在多个位置（餐厅菜单）中使用相同的jquery函数和相同的弹出div，并在弹出窗口中调用不同的img。我有弹出窗口正常工作。但无论我尝试什么，该功能默认为页面上的第一个。我究竟做错了什么？拉我的头发在这里？

<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

你的问题：

您不能在同一页面上拥有重复的ID。该值在HTML文档中必须是唯一的。
HTML中没有</img>结束标记。
为了便于阅读，并简化生产和调试，请尝试坚持使用一种类型/ ID案例格式。在这里，你混合了my-classname（Kebab Case）和my_classname（Snake Case）。还有myClassname（骆驼案） - 选择一种风格并坚持下去。

我可能会做类似的事情：

<强> CSS：

.overlay_div { display: none; }

<强> HTML：

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

请注意，我只使用一个叠加层，但它包含两个弹出窗口的内容，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的：

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

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

1 个答案: