Я пытаюсь достигнуть следующей функциональности. В форме у меня есть несколько полей с именем класса .inputField, если одно из этих полей выбрано затем, отделение связалось с тем элементом, должен быть показан на фокусе и скрыт на размытости. Однако, когда я реализую код ниже выбора второго элемента, класс применяется к обоим. Не уверенный, где я иду не так, как надо?!?!?
разметка 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();
});
});
Любые указатели здесь значительно ценились бы.
Спасибо
Если я правильно понял ваш вопрос, это должно помочь.
$('.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 ()
, который получит тег
и, таким образом, найдет все
] .helper
элементы в этом
.