jquery - 如何在同一页面中打开多个 jquery 对话框

Question

我在一个页面中至少有 20 个链接，并且在每个链接上我必须显示一个包含不同内容的弹出窗口。有什么方法可以让我只调用一个 javascript 函数并将它传递给必须显示为弹出窗口的 div 的 id。我的 html结构看起来像这样

<div id='1'>    
<a href='#'>Moreinfo</a>
<div id='popup1'>
Content for first link
</div>
</div>

<div id='2'>
<a href='#'>Moreinfo</a>
<div id='popup2'>
Content for first link
</div>
</div>

另外，如果我单击其他链接，第一个应该关闭。请在回复中给出合适的例子。谢谢

Answer 1

我会尝试这样的事情

<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<div class="popupHolder">
    <div class="clickToPopup">Click here</div>
    <div class="popup">your popup content</div>
</div>
<script type="text/javascript">
    $(document).ready(function() {
        $(".clickToPopup").click(function(){
             $(".popup").hide();
             $(this).parent("div.popupHolder").children("div.popup").show();
        });
    });
</script>

Answer 2

jsFiddle Demo

你可以这样做

$("div[id^=popup]").hide();
$("a").click(function(){
 $("div[id^=popup]").hide();
 var id = this.parentNode.id;
 $("#popup"+id).show();
});

Answer 3

<div id='1' class="div">
<a href='#'>Moreinfo</a>

    <div id='popup1' class="poppup">Content for first link</div>
</div>
<div id='2' class="div">
<a href='#'>Moreinfo</a>

    <div id='popup2' class="poppup">Content for first link</div>
</div>

查询

 $('.div').click(function () {
        $('.poppup').hide();
        $(this).children('.poppup').show();
    });

JS 小提琴链接