3

我正在尝试创建一个标准化的显示/隐藏元素系统，如下所示：

<div class="opener popup_1">Click Me</div>
<div class="popup popup_1">I'm usually hidden</div>

单击带有 opener 类的 div 应该显示（）带有弹出类的 div。我不知道在任何给定页面上我将有多少个开启器/弹出窗口组合，我不知道在任何给定页面上将显示开启器和弹出窗口的哪个位置，我不知道如何给定的开启者应该调用 show() 来处理许多弹出窗口。opener 和 popup 都必须能够拥有比 jQuery 使用的更多的类。

我想做的是这样的：

$(".opener").click(function() {
  var openerTarget = $(this).attr("class").filter(function() {
    return this.class.match(/^popup_([a-zA-Z0-9-_\+]*) ?$/);
  });
  $(".popup." + openerTarget).show();

这个想法是，当您单击打开器时，它会从打开器的类中过滤掉“popup_whatever”并将其存储为 openerTarget。然后将显示任何带有 class=popup 和 openerTarget 的内容。

4

3 回答 3

2 
$('.opener').click(function() {
  var openerTarget = this.className.match(/\bpopup_\w+\b/);
  $('.popup.' + openerTarget).hide();
}​);​

http://jsbin.com/ezizu3/edit

于 2010-03-19T01:47:09.887 回答
0

我倾向于认为这种事情使用 ID 效果更好：

<div id="popup1" class="opener">Click Me</div>
<div class="popup popup1">I'm usually hidden</div>

使用 CSS：

div.popup { display: none; }

和JS：

$("div.opener").click(function() {
  $("div." + this.id).toggle();
});
于 2010-03-19T07:20:15.090 回答
0

这似乎是使用 HTML5 自定义数据属性的好案例。

HTML：

<div data-popup-trigger="popup1">Click me!</div>
<div class="popup1">Secret information no one will ever see! Muahaha!</div>

JS：

$('[data-popup-trigger]').click(function() {
  var popupClass = $(this).attr('data-popup-trigger');
  $('.' + popupClass).show();
});

我认为这更干净，因为您不必使用 reg ex 解析元素的类。您可以向触发元素添加任意数量的任意其他类，并且触发器将导致弹出哪些元素仍然很明显。

于 2010-03-19T07:40:34.277 回答