具有多个类的jQuery元件：存储一个类作为VAR

Question

我试图创建一个标准化的显示/隐藏元件系统，像这样：

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

点击与开启器类在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();

我们的想法是，当你点击一个开门红，从揭幕战的类和商店，作为openerTarget过滤掉“popup_whatever”。然后用类=弹出和openerTarget任何将被显示。

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

我倾向于认为这种事情更好地工作用的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();
});

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前解析元素的类。可以任何数量的任意其他类添加到触发元件和它仍然是清楚明显的哪些元素的触发会导致弹出。