Question

我有一个包含2个文本输入和1个textarea的表单：

<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如何监控每个输入并根据完成的字段数更新类？

提前感谢您的任何帮助或建议。

Answer 1

$('input').change(function() {
    var answers = 0;
    var ansData = $('form').serializeArray();
    var $vals = ansData.value;
    $vals.each(function() {
        if ($(this) != '') answers++;
    });
    $('.img-holder').addClass(answers);
});

Answer 2

工作示例：http://jsfiddle.net/CthulhuDen/gKcKq/

$(function() {
    $("form").children().change(function() {
        var cnt = 0;
        $("form").children().each(function() {
            if ($(this).val()) cnt++;
        });
        $("form").removeClass("class1 class2 class3").addClass("class" + cnt)
    });
});

表单类根据填充的字段数进行更改。

当然，您必须在div的最后一行更改选择器。

Answer 3

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

如果页面没有任何其他输入，您应该只使用此解决方案...因为它会在整个页面上观看任何按键来调用此'验证'

根据输入更新Div类

3 个答案: