JQuery如何使焦點集中時突出顯示的表單的一部分？

Question

我有被劃分成的div例如分隔件的一種形式：

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

</form> 

我想，當有人突出或聚焦div的問題是使用CSS高亮的div中的任何元素。考慮一下這個事實，即我已經將一些處理程序應用於此表單上的某些輸入元素。

Answer 1

在CSS創建一個亮點類，並嘗試以下的jQuery：

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

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

Answer 2

你可以嘗試：

$('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 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 3

試試這個：

.highlight{background:#ddd} 


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

Answer 4

$('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/

如果你想確保只有表單標籤內的股利的權利被突出顯示，使用$(this).closest('form > div')。