更改不显示的列表项目的颜色：无;

Question

我试图在这里实现不同的东西，但简化了我的代码，以便我可以了解我做错了什么。

我正在使用jQuery验证显示验证错误以上各自的错误字段，以及在列表形式的屏幕的顶部。

最终我想要做的是获得一个动态编号的列表来显示基于实际存在的错误（即如果有12个潜在的错误，但用户只有2，列表的顶部将只显示2错误/描述（1. [错误]，2. [错误]），而不是12个错误的空白列表，只有2个显示，希望是有道理的）。

但是现在我只是试图削减逻辑到我能理解的东西，所以上述现在大多是不相关的。

我想要发生的事情：在“继续”按钮单击，潜在但显示：无错误将有一个与它们相关联的操作（在此测试案例中，将其文本颜色更改为棕色并保持显示：无） 。对于显示的错误，请将其文本颜色更改为绿色。

我的代码有什么问题？我错过了每个（），如果是的话，它会去哪里？为什么这if element is display:none do this, else do this无法正常工作？

<div class="error-message-container error-menu"> 
    <a href="#firstName"><label class="error" for="firstName" generated="true"></label></a> 
    <a href="#lastName"><label class="error" for="lastName" generated="true"></label></a> 
    <a href="#dobMonth"><label class="error" for="dobMonth" generated="true"></label></a> 
[...] 
</div> 

$('.btn-submit-val').on('click', function() { 
    if($('.error-menu a label').css('display') == 'none') { 
     $(this).css("color","brown"); 
    } else { 
     $(this).css("color","green"); 
    } 
}); 

小提琴：https://jsfiddle.net/DTcHh/25840/

Answer 1

您可以使用：可见的：隐藏选择

$('.btn-submit-val').on('click', function() { 
    $('.error-menu a label:hidden').css("color","brown"); 
    $('.error-menu a label:visible').css("color","green"); 
});