Question

简单地说，一旦 .wrap div中的所有文本输入都包含值，我希望背景颜色变为绿色。

此时第一个.wrap div中的颜色不会变为绿色，直到第二个 .wrap div也有值？

请让我知道我做错了什么。

    <div class="wrap">
        <input type="text" /><br />
        <input type="text" /><br />
    </div>
    <br />
    <div class="wrap">
        <input type="text" /><br />
        <input type="text" /><br />
        <input type="text" /><br />
    </div>

    $('.wrap').each(function () {
        $(this).change(function () {
            var trigger = false;
            $('input:text').each(function () {
                if (!$(this).val()) {
                    trigger = true;
                }
            });
            trigger ? $('input:text').parent().css('background-color', 'red') : $('input:text').parent().css('background-color', 'green');
        });
    });

Answer 1

绑定输入元素的变化：

$(this).find('input').change(function () {

以下是包含其他更改的完整代码：

$('.wrap').each(function () {
        $(this).find('input').change(function () {
            var trigger = false;
            var dish = $(this);
            dish.each(function () {
                if (!dish.val()) {
                    trigger = true;
                }
            });
            trigger ? dish.parent().css('background-color', 'red') : dish.parent().css('background-color', 'green');
        });
    });

Answer 2

首先，div元素没有change个事件。将您的change处理程序更改为input元素，而不是：

$(this).find('input').change(function() { ... });

其次，您的$('input:text')选择器并非特定于您正在迭代的.wrap元素，而是选择匹配的所有 input:text元素整个页面。

将$('input:text')的所有实例更改为$(this).parent().find('input:text')。

$(this).parent().find('input:text').each(function () {
    if (!$(this).val()) {
         trigger = true;
    }
});

这将选择input:text元素的父级中包含的input元素，该元素触发了change事件（相关的.wrap元素）。

Answer 3

<script>

    $('input').each(function() {
        check($(this));
    });

    $('textarea').each(function() {
        check($(this));
    });

    function check($toCheck) {
        $toCheck.change(function() {

            var missingVal = false;
            $toCheck.siblings().each(function() {
                if($(this).context.nodeName == "INPUT") {
                    if(!$(this).val()) {
                        missingVal = true;
                    }
                }
            })

            if($(this).is(':checkbox')) {
                if(!$(this).is(':checked')) {
                    missingVal = true;
                }
            } else {
                if(!$(this).val()) {
                    missingVal = true;
                }   
            }

            if(missingVal) {
                $(this).parent().css('background-color', 'red');
            } else {
                $(this).parent().css('background-color', 'green');
            }
        });
    }

</script>

表单.each（）和.val（）jQuery循环

3 个答案: