jQuery element with multiple classes: storing one class as a var

Posted by Aaron on Stack Overflow See other posts from Stack Overflow or by Aaron
Published on 2010-03-19T01:34:31Z Indexed on 2010/03/19 1:41 UTC
Read the original article Hit count: 332

Filed under:
|
|
|

I'm trying to create a standardized show/hide element system, like so:

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

Clicking on the div with the opener class should show() the div with the popup class. I don't know how many opener/popup combinations I'm going to have on any given page, I don't know where on any given page the opener and the popup are going to be displayed, and I don't know how many popups a given opener should call show() for. Both the opener and the popup have to be able to have more classes than just what's used by jQuery.

What I'd like to do is something like this:

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

The idea is that when you click on an opener, it filters out "popup_whatever" from opener's classes and stores that as openerTarget. Then anything with class=popup and openerTarget will be shown.

© Stack Overflow or respective owner

Related posts about jQuery

Related posts about filter