jQuery Element mit mehreren Klassen: Speichern einer Klasse als var

Question

Ich versuche, ein standardisiertes Ein- / Ausblenden Elementsystem zu schaffen, etwa so:

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

Durch Klicken auf dem div mit der Opener Klasse sollte die div mit der Popup-Klasse zeigen (). Ich weiß nicht, wie viele Opener / Popup-Kombinationen ich auf einer bestimmten Seite haben werde, ich weiß nicht, wo auf einer bestimmten Seite der Opener und das Popup werden angezeigt werden, und ich weiß nicht, wie viele Pop-ups ein gegebener opener sollte show () für nennen. Sowohl der Opener und das Popup müssen in der Lage sein, mehr Klassen zu haben, als genau das, was von jQuery verwendet wird.

Was würde Ich mag es, etwas zu tun, wie folgt aus:

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

Die Idee ist, dass, wenn Sie auf einem Öffner klicken, es filtert „popup_whatever“ von Eröffners Klassen und speichert, dass als openerTarget. Dann alles mit class = Popup und openerTarget wird angezeigt.

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

Ich neige dazu, diese Art der Sache zu denken, funktioniert besser IDs:

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

mit CSS:

div.popup { display: none; }

und JS:

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

Answer 3

Das scheint wie ein guter Fall die HTML5 benutzerdefinierte Datenattribute zu verwenden.

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();
});

Ich denke, das sauberer ist, weil Sie die Elementklassen mit reg ex nicht analysieren müssen. Sie können auf das auslösende Element eine beliebige Anzahl von beliebigen anderen Klassen hinzufügen und es wird immer noch klar ersichtlich sein, welche Elemente der Auslöser bewirkt, dass bis Pop.