Javascript 我的选择过程不匹配？

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

单击全选

通过单独选择

问题是，如果我尝试同时执行这两个命令，则会出现不匹配。 我的全选和单独选择工作正常。但问题是，当我选择全部时，当我单击单个元素然后选择全部时，效果不好。 以下是我到目前为止所做的尝试。现在请帮我解决这个问题，使它在所有情况下都能正常工作，即 如果我在全选后选择任何元素，甚至在单击该元素之后选择了所有元素，那么它应该可以正常工作。 还附加图像以提供更清晰的效果：

步骤1：

步骤2：

第三步：问题区域

$（'.SubNavHover li:first child'）。单击（函数（）{
$（'.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'）；
}否则{
$（this.removeClass（'allActive'）；
}
});
$（'.SubNavHover li a'）。单击（函数（）{
$（this.toggleClass（'currentActive'）；
if（$（this）.hasClass（'allActive'））{
$（this.removeClass（'currentActive allActive'）；
}
$（this.removeClass（'allActive'）；
});
ul，
李{
边际：0px；
填充：0px；
}
a{
颜色：黑色；
}
a、 缓和的{
颜色：蓝色；
}
a、 电流活跃{
颜色：蓝色；
}










在JS代码中做了一些更改


$（'.SubNavHover li:first child'）。单击（函数（）{
$（'.SubNavHover li a'）.addClass（'allActive'）；
if（$（'.SubNavHover li a'）.hasClass（'currentActive'））{
$（'.SubNavHover li a'）.removeClass（'currentActive'））
}
});
$（'.SubNavHover li a'）。单击（函数（）{
$（this.toggleClass（'currentActive'）；
if（$（this）.hasClass（'allActive'））{
$（this.removeClass（'currentActive allActive'）；
}
$（this.removeClass（'allActive'）；
});
ul，
李{
边际：0px；
填充：0px；
}
a{
颜色：黑色；
}
a、 缓和的{
颜色：蓝色；
}
a、 电流活跃{
颜色：蓝色；
}










在JS代码中做了一些更改


$（'.SubNavHover li:first child'）。单击（函数（）{
$（'.SubNavHover li a'）.addClass（'allActive'）；
if（$（'.SubNavHover li a'）.hasClass（'currentActive'））{
$（'.SubNavHover li a'）.removeClass（'currentActive'））
}
});
$（'.SubNavHover li a'）。单击（函数（）{
$（this.toggleClass（'currentActive'）；
if（$（this）.hasClass（'allActive'））{
$（this.removeClass（'currentActive allActive'）；
}
$（this.removeClass（'allActive'）；
});
ul，
李{
边际：0px；
填充：0px；
}
a{
颜色：黑色；
}
a、 缓和的{
颜色：蓝色；
}
a、 电流活跃{
颜色：蓝色；
}










您可以按大小检查活动元件

这个条件可以解决你的问题

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

这是工作代码


$（'.SubNavHover li:first child'）。单击（函数（）{
如果（$（“.currentActive”）.size（）==$（“.fa检查”）.size（））{
$（'.SubNavHover li a'）.toggleClass（'currentActive'）；
}否则{
$（'.SubNavHover li a'）.addClass（'currentActive'）；
}
});
$（'.SubNavHover li a'）。单击（函数（）{
$（this.toggleClass（'currentActive'）；
});
ul，
李{
边际：0px；
填充：0px；
}
a{
颜色：黑色；
}
a、 缓和的{
颜色：蓝色；
}
a、 电流活跃{
颜色：蓝色；
}










您可以按大小检查活动元件

这个条件可以解决你的问题

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

这是工作代码


$（'.SubNavHover li:first child'）。单击（函数（）{
如果（$（“.currentActive”）.size（）==$（“.fa检查”）.size（））{
$（'.SubNavHover li a'）.toggleClass（'currentActive'）；
}否则{
$（'.SubNavHover li a'）.addClass（'currentActive'）；
}
});
$（'.SubNavHover li a'）。单击（函数（）{
$（this.toggleClass（'currentActive'）；
});
ul，
李{
边际：0px；
填充：0px；
}
a{
颜色：黑色；
}
a、 缓和的{
颜色：蓝色；
}
a、 电流活跃{
颜色：蓝色；
}










用一个类试试这个
allActive
比如


$（函数（）{
$（'.SubNavHover li a'）。单击（函数（e）{
e、 预防默认值（）；
var ulparent=$（this）.closest（'.SubNavHover'）；
$（this.toggleClass（'allActive'）；
if（$（this.nexist（'li.select all'）.length）{
ulparent.find（'li:not（'select all'））.toggleClass（'allActive'，$（this.hasClass（'allActive'））；
}否则{
li=ulparent.find（'li:not（'select all'）；
ulparent.find（'li.select-all a'）.toggleClass（'allActive'，li.find（'a.allActive'）.length==li.find（'a'）.length）；
}
});
});
ul，
李{
边际：0px；
填充：0px；
}
a{
颜色：黑色；
}
a、 缓和的{
颜色：蓝色；
}
ul{浮点：左；边距：0 20px；}