elemento de jQuery con varias clases: el almacenamiento de una clase como una var

Question

Estoy intentando crear un sistema de elementos de mostrar / ocultar estandarizada, así:

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

Al hacer clic en el div con la clase de apertura debe mostrar () el div con la clase emergente. No sé cuántas combinaciones de apertura / emergente que voy a tener en una determinada página, no sé donde en una determinada página el abridor y la ventana emergente se van a visualizar, y yo no sé cómo muchas ventanas emergentes de un abridor dado debe llamar a show () para. Tanto el primer partido y el emergente tienen que ser capaces de tener más clases que sólo lo que usa jQuery.

Lo que me gustaría hacer es algo como esto:

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

La idea es que cuando se hace clic en un abridor, se filtra "popup_whatever" de las clases y las tiendas del abridor que como openerTarget. A continuación, se mostrará nada con class = emergente y openerTarget.

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

tiendo a pensar que este tipo de cosas funciona mejor uso de identificadores:

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

con CSS:

div.popup { display: none; }

y JS:

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

Answer 3

Este parece ser un buen caso de utilizar los atributos de datos 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();
});

Creo que esto es más limpio, ya que no tiene que analizar las clases del elemento con reg ex. Usted puede agregar cualquier número de clases arbitrarias otros al elemento desencadenante y que todavía será claramente evidente que los elementos del gatillo provocará a aparecer.