Jquery:检查是否已单击列表中的所有链接

Question

我正在创建一个头像创建者.用户有一个链接列表,他们必须单击这些链接来自定义头像选项.

在列表下,是一个提交按钮.我只希望当用户点击所有链接时出现提交按钮(这是一个响应式设计,所以这只会在Mobile上发生).

如何使用Jquery检查是否已单击所有链接,然后将"活动"类应用于包装器以显示提交按钮.

注意:链接是内容滑块的一部分,因此它们不链接到外部页面(单击链接隐藏/显示当前页面上的内容).

<div class="wrapper not-active">

<ul>
    <li><a href="#">HairColour</a></li>
    <li><a href="#">EyeColour</a></li>
    <li><a href="#">SkinColour</a></li>
    <li><a href="#">HairStyle</a></li>
</ul>


<a href="#" class="submit">SUMBIT CHOICES</a>

</div>

我有一个JSFIDDLE在这里,但我没有添加任何Jquery代码,因为我不确定使用哪个函数来检查是否已经点击了所有链接.(我省略了内容滑块的代码以保持清晰).

Answer 1

如何为已经点击的每个链接添加一个CSS类,然后测试总数中有多少个？

$(function() {
    var $all = $("ul li a");
    $all.click(function() {
        $(this).addClass("clicked");
        if($(".clicked").length === $all.length) {
           $(".submit").show();
        }
    });
});