更改不顯示的列表項目的顏色：無;

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"); 
});