Question

我有一个表格，它被分成由div分隔的部分，例如：

<form>
<div>
   Account Details
</div>
<div>
Personal Details
</div>
<div>
...etctec
</div>

</form>

我希望当有人突出显示或关注div中的任何元素时，使用css突出显示所讨论的div。考虑一下我已经在这个表单上的某些输入元素上应用了许多处理程序。

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

在CSS中定义highlight类：

.highlight {
    background-color: #ffa;
}

JS Fiddle demo，请注意，在演示中，我使用fieldset而不是div来包装各种label和input元素，但是否则它的原理完全一样。

更新了可增加漂亮度的演示：Revised JS Fiddle。

<小时/> 已编辑以回答OP提出的问题：

这很好 - 但是这个代码有点问题，即如果div中的输入失去焦点，则div显示为未突出显示。是否有一种方法可以使div保持焦点，直到另一个div中的输入元素被聚焦，然后聚焦div的父元素将被突出显示

是的，假设我理解你的话，那很容易：

$('input').focus(
    function() {
        $(this)
            .closest('form')
            .find('.highlight')
            .removeClass('highlight');
        $(this).closest('fieldset').addClass('highlight');
    });

JS Fiddle demo

Answer 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')。

Answer 3

在CSS中创建一个高亮类，并尝试以下jQuery：

$('input, select, textarea').focus (function ()
{
    var elem = $(this), container = elem.parents ('div');

    container.siblings ().removeClass ('highlight');
    container.addClass ('highlight');
})

Answer 4

试试这个：

.highlight{background:#ddd}


$('input').focus(function(){
    $(this).parent().parent().find('div.highlight').removeClass('highlight');
    $(this).parent().addClass('highlight');
});

JQuery如何在聚焦时突出显示表单的一部分？

4 个答案: