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, чтобы проверить, есть ли внутри элемента

ответ

Смежные вопросы