jQuery检查每个输入元素

我有一个包含4个元素的表单，这里有一个：

<form class="frm">
<div class="first-field">
  <input class="text1" type="text" placeholder="Uw naam.." value="">
  <svg version="1.1" class="unfilled" id="svg_user"></svg>
</div>

它检查输入元素是否已填充，并根据函数的结果将类应用于内部SVG元素。这个很好用

但是我有4个输入元素，为了让它工作，我需要给每个输入元素一个不同的类，并使用上面的jQuery代码4次

---

必须有一种更快更干净的方法来实现这一点？

您可以使用公共类

<div class="first-field">
    <input class="text1 required" type="text" placeholder="Uw naam.." value="" />
    <svg version="1.1" class="unfilled svg_user"></svg>
</div>

---

演示：

只需将

$（'.text1'）

替换为

$（'input'）

，它会将keyup事件绑定到所有输入。问题是，如果我这样做，并且我选中了这个选项，当第一个输入被填充时，svg类会发生变化，但一旦我开始输入第二个输入，svg元素获得它的默认类，因为所有输入元素共享相同的名称。因此它们是连接的，并得到相同的处理。因此，当第一个元素被填充时，会应用正确的类，但是一旦我开始输入第二个，并删除该文本，第一个输入元素也会重置，这意味着，默认类被应用。哇，你的代码工作得很好，我会尝试一下。谢谢你，伙计！

<div class="first-field">
    <input class="text1 required" type="text" placeholder="Uw naam.." value="" />
    <svg version="1.1" class="unfilled svg_user"></svg>
</div>

$('.required').keyup(function () {
    var $svg = $(this).next();
    if ($(this).val() == '') {
        $svg.attr("class", "unfilled");
    } else {
        $svg.attr("class", "unfilled filled");
    }
});