0

2 つのテキスト入力と 1 つのテキストエリアを持つフォームがあります。

<form action="#">
    <input type="text" />
    <input type="text" />
    <textarea name="" id="" cols="30" rows="10"></textarea>
</form>

背景画像が適用された div 要素:

<div class="img-holder"></div>

私が達成したいことは次のとおりです。

ユーザーがフォームに入力すると、入力されたフィールドの数に基づいて img-holder div にクラスを追加したいと思います。

つまり、ユーザーが 3 つのフィールドに入力した場合は class="3" を追加し、2 つ入力した場合は class="2" を追加し、1 つ入力した場合は class="1" を追加します。また、入力のいずれかをクリアすると、それに応じてクラスが更新されます。

jQuery を使用して各入力を監視し、完了したフィールドの数に基づいてクラスを更新するにはどうすればよいですか?

ヘルプや提案をお寄せいただきありがとうございます。

4

3 に答える 3

0

HTML:

<form action="#" id="a_form">
    <input type="text" id="first_input"/>
    <input type="text" id="second_input"/>
    <textarea name="" id="third_input" cols="30" rows="10" ></textarea>
</form>
<div class="img-holder"></div>

JS:

$(document).on('keydown', function () {
   var a = $('#first_input').val() ? 0 : 1;
   var b = $('#second_input').val() ? 0 : 1;
   var c = $('#third_input').val() ? 0 : 1;


   var result = a+b+c;
   result = result != 0 ? result : "";
   $('.img-holder').removeClass("1 2 3").addClass(result);
});

ページに他の入力がない場合にのみ、このソリューションを使用する必要があります...ページ全体でキープレスを監視して、この「検証」を呼び出すためです。

于 2013-09-06T23:38:38.843 に答える