添加和删除类不适用于foreach

Add and remove class isnt working for foreach

本文关键字：适用于 foreach 不适用 删除 添加      更新时间：2023-09-26

如果用户按下submit后输入有值，我将尝试添加和删除一个类。我有一个名为"数量"的类，它是一个动态字段（用户可以添加或删除多个数量输入）。

输入的html是：

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

但我也试图更改一个div，该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");
            }
        });
});

有什么想法吗？

由于您正在为每个.qty更改#qty-error的类，因此#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");
}
相关文章：