[jQuery] Dynamic Event Handler
I have some 'NAV' elements, that when clicked should slideToggle their
respective 'DATA' elements. I am trying to do this by traversing an
Object with a for loop, and each elements IDs are stored in this data
structure. However, once execute, each click of any of the NAV
elements only slideToggles the last DATA element.
Ex:
Code:
-- JAVASCRIPT
var categories = new Array();
categories[1] = new Object;
categories[1]['nav_id'] = 'NAV_1';
categories[1]['data_id'] = 'DATA_1';
categories[2] = new Object;
categories[2]['nav_id'] = 'NAV_2';
categories[2]['data_id'] = 'DATA_2';
-- JQUERY
for( var index in categories ){
var nav_id = categories[ index ]['nav_id'];
var data_id = categories[ index ]['data_id'];
$('#' + nav_id).click( function(){
$('#' + data_id).slideToggle('slow');
}
);
}
-- HTML
<div id='NAV_1'>
</div>
<div id='NAV_2'>
</div>
<div id='DATA_1'>
</div>
<div id='DATA_2'>
</div>
-- each div is absolutely positioned in the page
I could possible see that JQuery could get confused by this, but to me
should be able to work somehow. Could there possibly be a way to do a
foreach() through element id's that match a certain regular
expression?
Any help is greatly appreciated!