Elément jQuery avec plusieurs classes: le stockage d'une classe en tant que var

Question

Je suis en train de créer un système d'éléments show / hide standardisé, comme suit:

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

En cliquant sur le div avec la classe ouvre-porte doit montrer () div avec la classe popup. Je ne sais pas combien de combinaisons ouvre / pop-up, je vais avoir sur une page donnée, je ne sais pas où sur une page donnée et l'ouvre le menu contextuel vont être affichés, et je ne sais pas comment beaucoup de popups un ouvreur donné doit appeler show () pour. Tant l'ouvre-porte et la fenêtre doivent être en mesure d'avoir plus de classes que tout ce qui est utilisé par jQuery.

Ce que je voudrais faire est quelque chose comme ceci:

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

L'idée est que lorsque vous cliquez sur un ouvreur, il filtre « popup_whatever » de classes d'ouvre-boîte et les magasins qui les openerTarget. Alors quoi que ce soit avec class = pop-up et openerTarget sera affiché.

Answer 1

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

http://jsbin.com/ezizu3/edit

Answer 2

Je tends à penser ce genre de chose fonctionne mieux en utilisant ID:

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

avec CSS:

div.popup { display: none; }

et JS:

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

Answer 3

Cela semble être un bon exemple pour utiliser les attributs de données personnalisés 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();
});

Je pense que c'est plus propre parce que vous ne devez pas analyser les classes de l'élément avec reg ex. Vous pouvez ajouter un certain nombre d'autres classes arbitraires à l'élément déclencheur et il sera encore clairement évident quels éléments le déclencheur fera apparaître.