Question

我有一些链接，当有人点击这些链接时，它会显示一个弹出窗口，其中包含一些信息。然后在用户点击x时关闭它。我使用了jquery的show并隐藏了这样做。不同的链接有不同的信息，所以我重复自己，我想知道有没有办法不重复自己。This Link会带你到我的代码所在的jsbin，你明白我在说什么。谢谢。

Answer 1

如果你给div你试图显示一个id，你点击相同类的链接和div id的href（这也使它更容易访问），你可以这样做：

http://jsfiddle.net/GE6fX/1/

<强> HTML

<a class="show" href="#zerotwo">link1</a>
<div id="zerotwo">
   <h1>Link heading <span>[close x]</span></h1>
   <p>blah</p>
</div>
<a class="show" href="#zerothree">link2</a>
<div id="zerothree">
   <h1>Link heading <span>[close x]</span></h1>
   <p>blah</p>
</div>

<强> JS

$('.show').click(function() {
    var showDiv = $($(this).attr('href'));
    showDiv.show();
    showDiv.find('h1 span').click(function() {
        showDiv.hide();
    });
});

Answer 2

您需要以某种方式从链接传递要显示的div的类，这是data-属性的一种方式。如果页面上只有一个div，则应为id。

我已经将你的链接更改为同一个类'show'（可以更好地命名），弹出按钮我给了一个closepopup类，你的弹出窗口有一个{{1单击关闭一个将隐藏显示的所有弹出窗口（这可能不是所需的行为）

Html

popup

Js

<body>
  <a class="show" data-popupid="zerotwo" href="#">link1</a>
  <a class="show" data-popupid="zerothree" href="#">link2</a>
    <div id="zerotwo" class="popup">
      <h1>Link heading <span class='closepopup'>[close x]</span></h1>
      <p>dhakshdakdhkhdahdlldhalksh</p>
    </div>
    <div id="zerothree" class="popup">
      <h1>Project completion report submission <span class='closepopup'>[close x]</span></h1>
       <p>dhakshdakdhkhdahdlldhalksh</p>
    </div>                    
</body>

您可以通过在页面上设置一个$(document).ready(function() { $('.show').click(function() { var popupClass = $(this).data('popupid'); $('div#' + popupClass).show(); }); $('.closepopup').click(function() { $('div.popup').hide(); }); });来控制内容或弹出窗口类型，然后在JS中动态添加弹出窗口的内容。

根据您的要求，有很多解决方案。

Answer 3

您可以通过多种方式清理它在这里，我只使用一个弹出式div，而是在每次点击时设置其内容。

http://jsbin.com/ovomaw/2/edit

或者您可以使用某种模板库为每个弹出窗口添加html到文档中（这样可以让您同时看到多个弹出窗口）。

如果不了解您的数据来自哪里等，那么很难确定正确的解决方案

不想重复自己

3 个答案: