jQuery elemento com várias classes:o armazenamento de uma classe como um var

Question

Eu estou tentando criar um padrão de mostrar/ocultar elemento do sistema, como:

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

Clicando sobre a div com o abridor de classe deve mostrar() a div com o pop-up de classe.Eu não sei quantas abridor/popup combinações vou ter em qualquer página, eu não sei de onde em qualquer página, o abridor e o popup vai ser exibido, e eu não sei como muitos pop-ups de um determinado abridor deve chamar show() para.Tanto o abridor e o pop-up tem que ser capaz de ter mais aulas do que apenas o que é usado pelo jQuery.

O que eu gostaria de fazer algo como isto:

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

A idéia é de que quando você clica em um abridor, ele filtra "popup_whatever" do abridor de classes e lojas que como openerTarget.Em seguida, tudo com classe=pop e openerTarget será mostrado.

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

Costumo pensar que esse tipo de coisa funciona melhor usando IDs:

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

com CSS:

div.popup { display: none; }

e JS:

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

Answer 3

Parece um bom caso para usar os atributos de dados personalizados 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();
});

Eu acho que isso é mais limpo, porque você não precisa analisar as classes do elemento com o Reg Ex. Você pode adicionar qualquer número de outras classes arbitrárias ao elemento desencadeador e ainda ficará claramente óbvio quais elementos o gatilho causará ao aparecer.