複数のクラスを持つjQueryの要素：VARとして1つのクラスを保存します

Question

私は、標準化された表示/非表示要素のシステムを作成しようとしていますので、同様ます：

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

オープナークラスでdiv要素をクリックすると、）（ポップアップクラスを持つdiv要素を示すべきです。 I私は、任意のページに持っているつもりですどのように多くのオープナー/ポップアップ組み合わせ分からない任意のページにオープナーとポップアップが表示されようとしているところ、私は知らない、と私は方法がわかりません多くのポップアップ与えられたオープナーのためのショーを（）を呼び出す必要があります。オープナーとポップアップの両方が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の元で要素のクラスを解析する必要はありませんので、これはきれいだと思います。あなたは、トリガー要素に任意の他のクラスの任意の数を追加することができますし、まだトリガがポップアップする原因となる要素を端的に明らかであろう。