Hi,
I'm trying to achieve the following functionality. Within a form I have multiple fields with the
class name .inputField if one of these fields is selected then the div associated with that element should be shown on focus and hidden on blur. However, when I implement the code below on selecting the second element the
class is applied to both. Not sure where I'm going wrong?!?!?
html markup:
<form class="friendlyForm" name="friendlyForm" id="friendlyForm">
<ul>
<li>
<label for="testField">Test field</label>
<input name="testField" value="here" class="inputField" id="testField" />
<div class="helper" style="display: none;">helper text here</div>
</li>
<li>
<label for="testField">Test field2</label>
<input name="testField2" value="here" class="inputField" id="testField2" />
<div class="helper" style="display: none;">helper text here</div>
</li>
</ul>
</form>
jQuery markup:
$('.friendlyForm').find('.inputField').each(function(i) {
$(this).blur();
$(this).focus(function() {
//Add the focus
class and fadeIn the helper div
$(this).parent().addClass('focus');
$(this).parent().parent().find('.helper').fadeIn();
});
$(this).blur(function () {
//Remove the focus
class and fadeOut helper div
$(this).parent().removeClass('focus');
$(this).parent().parent().find('.helper').fadeOut();
});
});
Any pointers here would be greatly appreciated.
Thanks
