我正在尝试实现以下功能。在一个表单中,我有多个带有类名.inputField的字段,如果选择了其中一个字段,则与该元素关联的div应显示在焦点上并隐藏在模糊上。但是,当我在选择第二个元素时实现下面的代码时,该类将应用于两者。不知道我哪里出错了?!?!?
html标记:
<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标记:
$('.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();
});
});
非常感谢这里的任何指示。
由于
答案 0 :(得分:2)
如果我理解你的问题,这应该可以解决问题。
$('.friendlyForm .inputField').each(function () {
$(this).blur().focus(function () {
$(this).parent().addClass('focus');
$(this).siblings('.helper').fadeIn();
}).blur(function () {
$(this).parent().removeClass('focus');
$(this).siblings('.helper').fadeOut();
});
});
您所做错的是,您使用的parent().parent()
会获得<ul>
标记,因此会找到.helper
中的所有<ul>
个元素。