Question

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

我使用jQuery验证在其各自的错误字段上方显示验证错误，以及在列表窗体的屏幕顶部显示验证错误。

最终，我尝试做的是根据实际存在的错误获取动态编号列表（即，如果有12个潜在错误，但用户只生成2个，则列表顶部仅显示2个错误/描述（1. [错误]，2。[错误]）而不是12个错误的空白列表，只有2个显示，希望有意义。）

但是现在我只是想把逻辑简化为我能理解的东西，所以上面的内容现在大部分都是无关紧要的。

我想要发生什么：在＆＃34;继续＆＃34;按钮单击，潜在但显示：无错误将有一个与它们关联的操作（在此测试用例中，将其文本颜色更改为棕色并保持显示：无）。对于DO显示的错误，将其文本颜色更改为绿色。

我的代码出了什么问题？我错过了每个（），如果是的话，它会去哪里？为什么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

您可以使用：visible和：hidden选择器

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

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

1 个答案: