具有多个类的 jQuery 元素：将一个类存储为 var

Question

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

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

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

我想做的是这样的：

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

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

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

我倾向于认为这种事情使用 IDs:

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

with CSS:

div.popup { display: none; }

和 JS:效果更好

$("div.opener").click(function() {
  $("div." + this.id).toggle();
});

Answer 3

这似乎是使用 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 解析元素的类。您可以向触发元素添加任意数量的任意其他类，并且触发器将导致弹出哪些元素仍然是显而易见的。