Elemento jQuery con più classi:memorizzando una classe come var

Question

Sto cercando di creare un sistema di elementi mostra/nascondi standardizzato, in questo modo:

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

Facendo clic sul div con la classe di apertura dovrebbe mostrare() il div con la classe popup.Non so quante combinazioni di apertura/popup avrò su una determinata pagina, non so dove su una determinata pagina verranno visualizzati l'apertura e il popup e non so come molti popup per i quali un determinato apri dovrebbe chiamare show().Sia l'opener che il popup devono essere in grado di avere più classi di quelle utilizzate da jQuery.

Quello che mi piacerebbe fare è qualcosa del genere:

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

L'idea è che quando si fa clic su un opener, filtra "popup_whatever" dalle classi dell'opener e lo memorizza come openerTarget.Quindi verrà mostrato qualsiasi cosa con class=popup e openerTarget.

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

tendo a pensare una cosa del genere funziona meglio utilizzando gli ID:

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

con i CSS:

div.popup { display: none; }

e JS:

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

Answer 3

Questo sembra un buon caso per utilizzare gli attributi dei dati personalizzati 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();
});

Penso che questo sia più pulito perché non devi analizzare le classi dell'elemento con reg ex.È possibile aggiungere un numero qualsiasi di altre classi arbitrarie all'elemento di attivazione e sarà comunque chiaramente ovvio quali elementi il ​​trigger farà apparire.