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

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);
});
于 2013-09-06T23:31:50.103 回答
0

工作示例：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 更改选择器。

于 2013-09-06T23:29:26.607 回答
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 回答