javascript - 添加和删​​除类不适用于 foreach

Question

如果用户按下提交后输入有值，我将尝试添加和删除类。我有一个名为“qty”的类，它是一个动态字段(用户可以添加或删除多个 qty 输入)。

输入的 html 是:

<input placeholder='Insert Quantity' value='' name='saved_item[1][qty]' class='qty' type='text'/>

但我也尝试更改一个将用文本显示错误的 div:

<span id="qty-error" class="hide-error">• Please make sure to fill out all item information or delete the item row</span>

尽管它显示了“inputerror”类(将边框变成红色)，但它并没有显示。

我的jquery是:

$('#submit').click(function(e){
$(".qty").each(function(){
            if ($(this).val() == "" && $(this).is(':enabled')){
                $(this).addClass("inputerror");
                $("#qty-error").removeClass("hide-error");
                $("#qty-error").addClass("show-error");
                e.preventDefault();
            } else {
                $(this).removeClass("inputerror");
                $("#qty-error").removeClass("show-error");
                $("#qty-error").addClass("hide-error");
            }
        });
});

有什么想法吗？

Answer 1

由于您要更改 each .qty 的 #qty-error 类，因此 #qty-错误将由最后.qty项目的状态决定。

您可以更改它以将类应用到#qty-error:

$(".qty").each(function(){
    if ($(this).val() == "" && $(this).is(':enabled')){
        $(this).addClass("inputerror");
        e.preventDefault();
    } else {
        $(this).removeClass("inputerror");
    }
});

if ($(".qty.inputerror").length > 0) {
    $("#qty-error").removeClass("hide-error");
    $("#qty-error").addClass("show-error");
}
else {
    $("#qty-error").removeClass("show-error");
    $("#qty-error").addClass("hide-error");
}