javascript - 使用 jQuery 跟踪输入和切换类

Question

我想要实现的是跟踪 20 个输入，如果一个输入已满，我想将一个类添加到此输入的父 div，如果它在我希望该类从父级中删除后变为空。当我在控制台中运行这段代码时，它可以满足我的要求，我该如何改进它以便它可以跟踪输入并切换类？

$('.input').each(function() {
    var $input = $(this);
    if ($input.val()) {
        var $parent = $input.closest('.card');
        $parent.addClass('colored')
    }
});

Answer 1

您可以使用事件来做到这一点。对于输入，jQuery 具有 input 事件，每次输入值更改时都会触发该事件。

$(".input").on("input", function () {
    if ($(this).val().length === 0)
        $(this).closest('.card').removeClass("colored");
    else
        $(this).closest('.card').addClass("colored");
});