#javascript #jquery #css
#javascript #jquery #css
Вопрос:
У меня есть форма, которая разделена на части, разделенные разделителями, например:
<form>
<div>
Account Details
</div>
<div>
Personal Details
</div>
<div>
...etctec
</div>
</form>
Я хочу, чтобы, когда кто-то выделяет или фокусируется на каком-либо элементе в divs, соответствующий div выделялся с помощью css. Учтите тот факт, что я применил ряд обработчиков к определенным элементам ввода в этой форме.
Ответ №1:
Вы могли бы попробовать:
$('input').focus(
function(){
// adds the 'highlight' class to the parent
$(this).closest('div').addClass('highlight');
});
С помощью:
$('input').blur(
function(){
// removes the 'highlight' class from the parent so only one highlight is ever visible.
$(this).closest('div').removeClass('highlight');
});
И определить highlight
класс в CSS:
.highlight {
background-color: #ffa;
}
Демонстрационная версия JS Fiddle, пожалуйста, обратите внимание, что в демо-версии я использую fieldset
s вместо div
для обертывания различных элементов label
и input
, но в остальном это точно такой же принцип.
Обновлена демонстрационная версия для большей привлекательности: переработан JS Fiddle.
Отредактировано в ответ на вопрос из OP:
Это здорово — однако с этим кодом есть небольшая проблема, то есть, если когда-либо входные данные в div теряют фокус, div отображается как неосвещенный. Есть ли способ, чтобы div оставался в фокусе до тех пор, пока не будет сфокусирован элемент ввода в другом div, на который затем будет выделен родительский элемент сфокусированного div
Да, предполагая, что я вас правильно понял, это довольно просто:
$('input').focus(
function() {
$(this)
.closest('form')
.find('.highlight')
.removeClass('highlight');
$(this).closest('fieldset').addClass('highlight');
});
Комментарии:
1. Это здорово — однако с этим кодом есть небольшая проблема, то есть, если когда-либо входные данные в div теряют фокус, div отображается как неосвещенный. Есть ли способ, чтобы div оставался в фокусе до тех пор, пока не будет сфокусирован элемент ввода в другом div, на который затем будет выделен родительский элемент сфокусированного div
Ответ №2:
$('form > div').delegate('input', 'focus', function() {
$(this).closest('div').addClass('active');
}).delegate('input', 'blur', function() {
$(this).closest('div').removeClass('active');
});
Демонстрация: http://jsfiddle.net/ThiefMaster/fG8Au /
Если вы хотите быть уверены, что выделен только div прямо внутри тега формы, используйте $(this).closest('form > div')
.
Комментарии:
1. Это здорово — как я могу изменить это, чтобы при щелчке внутри div фокус не терялся .. в настоящее время, если я щелкаю внутри div, фокус теряется при вводе, и содержащий div теряет назначенный класс.
Ответ №3:
Создайте класс highlight в вашем CSS и попробуйте следующий jQuery:
$('input, select, textarea').focus (function ()
{
var elem = $(this), container = elem.parents ('div');
container.siblings ().removeClass ('highlight');
container.addClass ('highlight');
})
Ответ №4:
Попробуйте это:
.highlight{background:#ddd}
$('input').focus(function(){
$(this).parent().parent().find('div.highlight').removeClass('highlight');
$(this).parent().addClass('highlight');
});