jQuery element with multiple classes: storing one class as a var
- by Aaron
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.
