我的选择过程中不匹配？

Question

我有一个scenario- 我必须选择一系列元素与2个概率：

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

问题是如果我尝试执行两者，就会出现不匹配问题。 我选择所有和选择单独运作良好。但问题是，当我选择所有，当我点击单个元素，然后选择所有没有很好地工作。 以下是我到目前为止所尝试过的。现在请帮我解决这个问题，以便它在所有情况下都能正常工作，例如，如果我在选择所有应用程序之后选择所有元素后点击任何元素，即使我选择了所有元素，也是如此。 另外附加图像，得到更清晰：

步骤1：

步骤2：

步骤3：该问题区域

$('.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

与单一类allActive喜欢试试这个，

$(function() { 
 
    $('.SubNavHover li a').click(function(e) { 
 
    e.preventDefault(); 
 
    var ulparent = $(this).closest('.SubNavHover'); 
 
    $(this).toggleClass('allActive'); 
 
    if ($(this).closest('li.select-all').length) { 
 
     ulparent.find('li:not(".select-all") a').toggleClass('allActive', $(this).hasClass('allActive')); 
 
    } else { 
 
     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, 
 
li { 
 
    margin: 0px; 
 
    padding: 0px; 
 
} 
 

 
a { 
 
    color: black; 
 
} 
 

 
a.allActive { 
 
    color: blue; 
 
} 
 
ul{float:left;margin: 0 20px;}

<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 class="select-all"><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> 
 
<ul class="SubNavHover" style="opacity:1; visibility:visible;"> 
 
    <li class="select-all"><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 2

在JS代码改变了一点。

$('.SubNavHover li:first-child').click(function() { 
 
    $('.SubNavHover li a').addClass('allActive'); 
 
    if ($('.SubNavHover li a').hasClass('currentActive')) { 
 
    $('.SubNavHover li a').removeClass('currentActive ') 
 
    } 
 
}); 
 
$('.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>

这里是工作Fiddle

Answer 3

您可以通过大小

检查有源元件，这种情况解决您的问题

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

这里是WO rking代码

$('.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>

Answer 4

你需要删除的类名selectAll所有其他li选择和取消选择时间。

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

 
}); 
 
$('.SubNavHover li:not(:first-child) a').click(function() { 
 
$('.SubNavHover li:first-child a').removeClass('currentActive').removeClass('allActive') 
 
    $(this).toggleClass('currentActive'); 
 
    if ($(this).hasClass('allActive')) { 
 
    $(this).removeClass('currentActive allActive'); 
 
    } 
 
    $(this).removeClass('allActive'); 
 
    //console.log($(this).attr('class')) 
 
});

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>