0

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

2
Contributors
1
Reply
2
Views
7 Years
Discussion Span
Last Post by soldierflup
0

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);
		}
		);

Edited by soldierflup: n/a

This topic has been dead for over six months. Start a new discussion instead.
Have something to contribute to this discussion? Please be thoughtful, detailed and courteous, and be sure to adhere to our posting rules.