1

入力の 3 つのサブグループ (さまざまな種類) を含むフォームがあります。サブグループは、クラス名 (.group_1、.group_2、.group_3) で示されます。

私がやりたいことはこれです：

特定のクラス (.group_1 など) のすべての入力がフォーカスを受け取る (または変更された、どちらでも機能する) と、別のスパンのクラスが削除されます (おそらく removeClass を使用します)。特定のクラス内の 5 つの入力のうち 4 つだけがフォーカスを受け取った (または変更された) 場合、クラスは 5 番目がフォーカスされるか変更されるまでスパンに残ります。

ご理解のほどよろしくお願いいたします。

4

2 に答える 2

3

次のような単純なものはどうでしょうか。

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

?

于 2012-09-10T23:01:57.557 に答える
0

いくつかの疑似クラスを使用して、入力がイベントにフォーカスされていることをマークし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');
    }
});

デモ

于 2012-09-10T23:11:08.123 に答える