Question

我有一个包含三个输入子组（各种类型）的表单。子组由类名（.group_1，.group_2，.group_3）表示。

我想做的是：

一旦特定类的所有输入（例如.group_1）已经获得焦点（或者已被更改，或者任何一个都可以工作），就会删除单独跨度的类（假设使用removeClass）。如果特定类别中的5个输入中只有4个已经获得焦点（或已被更改），则该类将保持在跨度上，直到第5个被聚焦或更改为止。

希望有意义，先谢谢你的帮助。

Answer 1

像这样直截了当的事情：

http://jsfiddle.net/zerkms/7EUas/

var selectedMarkerClass = 'was-selected';

$('.group_1').on('focus', function() {
    $(this).addClass(selectedMarkerClass);

    if ($('.' + selectedMarkerClass).length == $('.group_1').length) {
        $('div').text('each input was selected at least once');
    }
});

Answer 2

您可以使用一些伪类将输入标记为专注于focus事件，并检查它们是否都已集中。如果是，请从您的范围中删除课程。

<强> HTML：

<span class="group1 red">Test span</span>

<div id="group1-container">
    <input class="group1" type="text" />
    <input class="group1" type="text" />
    <input class="group1" type="text" />
    <input class="group1" type="text" />
    <input class="group1" type="text" />
</div>

<强> JavaScript的：

group1Container$ = $('#group1-container');
group1$ = $('input.group1', group1Container$);
group1$.on('focus', function() {
    var input$ = $(this);
    input$.addClass('focused');
    if(!$('input.group1:not(.focused)', group1Container$).length) {
        $('span.group1').removeClass('red');
        group1$.off('focus');
    }
});

<强> DEMO

所有输入都获得焦点后jQuery - removeClass？

2 个答案: