javascript - 我的选择过程不匹配？

Question

我有一个场景- 我必须选择一系列具有 2 个概率的元素:

1. 点击全选。
2. 通过单独选择。

问题是如果我尝试同时执行这两个 . 我的全选和单独选择运行良好。但问题是当我全选时单击单个元素然后全选时效果不佳。 以下是我到目前为止所尝试过的。现在请帮助我解决这个问题，以便它在所有情况下都能正常工作，即 如果我在选择所有元素后单击任何元素后仍然选择所有元素，那么它应该可以正常工作。 还附加图像以提供更多清晰度:

Step 1 :

Step 2:

Step3: The problem area

$('.SubNavHover li:first-child').click(function() {
  $('.SubNavHover li a').toggleClass('allActive');
  if ($('.SubNavHover li a').hasClass('currentActive')) {
    $('.SubNavHover li a').removeClass('currentActive ').addClass('allActive ');
  }
  if ($(this).nextAll().hasClass('allActive')) {
    $(this).addClass('allActive');
  } else {

    $(this).removeClass('allActive');
  }

});
$('.SubNavHover li a').click(function() {
  $(this).toggleClass('currentActive');
  if ($(this).hasClass('allActive')) {
    $(this).removeClass('currentActive allActive');
  }
  $(this).removeClass('allActive');
});

ul,
li {
  margin: 0px;
  padding: 0px;
}

a {
  color: black;
}

a.allActive {
  color: blue;
}

a.currentActive {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>


</ul>

Answer 1

您可以按大小检查事件元素

这个条件解决了你的问题

if($(".currentActive").size() == $(".fa-check").size()){
    $('.SubNavHover li a').toggleClass('currentActive');
}else{
    $('.SubNavHover li a').addClass('currentActive');
}

这是工作代码

$('.SubNavHover li:first-child').click(function() {
  if($(".currentActive").size() == $(".fa-check").size()){
     $('.SubNavHover li a').toggleClass('currentActive');
  }else{
       $('.SubNavHover li a').addClass('currentActive');
  }
 
});
$('.SubNavHover li a').click(function() {
  $(this).toggleClass('currentActive');
});

ul,
li {
  margin: 0px;
  padding: 0px;
}

a {
  color: black;
}

a.allActive {
  color: blue;
}

a.currentActive {
  color: blue;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" />
<ul class="SubNavHover" style="opacity:1; visibility:visible;">
  <li><a href="#">Select All </a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>
  <li><a href="#">Sub Menu <i class="fa fa-check"></i></a></li>


</ul>