JQuery element with multiple classes: saving one class as var

Question

I am trying to create a standardized show / hide element system, for example:

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

Clicking on a div with the opener class should show the () div using the popup class. I don’t know how many combinations of opening / pop-ups I will have on each given page, I don’t know where a pop-up and pop-up will open on any page, and I don’t know how many pop-ups I should have given opener, you need to call show () for. Both the opening and the popup should have more classes than what jQuery uses.

What I would like to do is something like this:

$(".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.

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

, , :

<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 ex. , , .