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

Question

我尝试添加和删除类，如果用户按提交后输入具有值。我有一个名为“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

由于您为每个 #qty-error更改了.qty的班级，#qty-error的班级将由的状态决定最后 .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");
}