0

我有一些链接，当有人单击这些链接时，它会显示一个包含一些信息的弹出窗口。然后当用户单击 x 时关闭它我使用了 jquery 的显示和隐藏来执行此操作。不同的链接有不同的信息，所以我重复了自己，我想知道有什么办法不重复自己。这个链接将带你到我的代码所在的 jsbin，你明白我在说什么。谢谢你。

4

3 回答 3

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();
    });
});
于 2013-02-27T10:52:47.353 回答
1

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

我已将您的链接更改为具有相同的“显示”类（可以更好地命名），弹出按钮我给了一个类closepopup，并且您的弹出窗口有一类popup单击关闭一个将隐藏所有显示的弹出窗口（这可能不是期望的行为）

html

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

JS

$(document).ready(function() {
  $('.show').click(function() {
    var popupClass = $(this).data('popupid');
    $('div#' + popupClass).show();
  });
  $('.closepopup').click(function() {
    $('div.popup').hide();
  });
});

div您可以通过在页面上设置一个并控制单击的任何链接的内容或弹出类型，然后在 JS 中动态添加弹出内容的内容来使这一点更整洁。

这个有很多解决方案，具体取决于您的要求。

于 2013-02-27T10:59:24.977 回答
0

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

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

或者您可以使用某种模板库为每个弹出窗口添加 html 到您的文档中（这将允许您一次看到多个弹出窗口）。

如果不了解您的数据来自何处等，很难确定正确的解决方案

于 2013-02-27T10:57:55.077 回答