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
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