so

I'm trying to manipulate elements that are name related. A div 'button' has id="phoneInput"

It's corresponding div has id="phoneInput_div". When #phoneInput is hovered over...

$('.unSel').hover(
		function() {
			$(this).toggleClass('sel');
			$($(this) + "_div").toggle(true);
		},
		function() {
			$(this).toggleClass('sel');
			$($(this) + "_div").toggle(false);
		}
		);

...its corresponding #phoneInput_div needs to show, then when hovered out, #phoneInput_div should hide. There's about 8 buttons that will have this function, each with a corresponding div and same basic naming convention.

My question really is how to select and manipulate my two elements (div button and it's related info div), by using concatenation to change the name of the selector?

Hope that makes sense... thanks for your help

Member Avatar

Try using the attribute selector to define the corresponding div :

var corr_div = $(this).attr('id')+"_div";
$('#'+corr_div).toggle(false);

So your code will become this :

$('.unSel').hover(
		function() {
			$(this).toggleClass('sel');
			$('#' + $(this).attr('id') + "_div").toggle(true);
		},
		function() {
			$(this).toggleClass('sel');
			$('#' + $(this).attr('id') + "_div").toggle(false);
		}
		);