形成 .each() 和 .val() jQuery 循环

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') selector 并不特定于您正在迭代的 .wrap 元素，而是 selecting all input:text 个元素在整个页面上匹配。

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

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

这将 select 包含在 input 元素的父元素中的任何 input:text 元素，该元素触发了 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 循环

Form .each() and .val() jQuery loop

jquery