jquery檢查是否內部元素

我想添加一個類到元素，如果用戶點擊它裏面。jquery檢查是否內部元素

所有常見的規則 - 「內部」意味着它可能是一個孩子，孫子女等

如果裏面，我需要添加一個類中 - 如果外類應除去。

我把這個例子拼湊在一起，這個例子很有用，但作爲一個非JavaScript的人，我會很感激一些反饋，看它是否是一種合理的方法，如果它可以改進 - 通過改進，到jQuery/JavaScript的性能。

任何意見讚賞。

$("body").click(function (e) { 

    $fs = $(e.target).closest("fieldset.expand"); 

    if ($fs.length) { 
     $fs.addClass("focus"); 
    } 
    else { 
     $("fieldset.expand").removeClass("focus"); 
    } 
});

<body> 
    <fieldset class="expand"> 
     <input type="text" /> 
     <input type="text" /> 
     <input type="text" /> 
    </fieldset> 
</body>

來源

2015-09-30 John Ohara

可以添加到您的html？ –

@AlexChar - 增加了典型的使用html，但沒什麼特別的。 –

所以基本上你想要添加類，如果用戶試圖點擊'fieldset'內有'expand'類的任何輸入字段。如果這是真的，那麼我們可以改進代碼？讓我知道！ – deepakb

讓您fieldset可獲得焦點（但不tabbable），使用tabindex屬性具有負值。然後設置使用focusin focusout事件的邏輯：

$('fieldset.expand').on('focusin focusout', function() { 
 
    $(this).toggleClass('focus', $(this).find('*').addBack().is(':focus')); 
 
});

fieldset.focus { 
 
    outline: 0; 
 
    background: red; 
 
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
 
<fieldset tabindex="-1" class="expand"> 
 
    <input type="text" /> 
 
    <input type="text" /> 
 
    <input type="text" /> 
 
</fieldset>

來源

2015-09-30 11:00:07

jquery檢查是否內部元素

回答

相關問題