1

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

在列表下方，是一个提交按钮。我只希望在用户单击所有链接时出现提交按钮（这是一种响应式设计，因此只会在移动设备上发生）。

如何使用 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 Here，但我没有添加任何 Jquery 代码，因为我不确定使用哪个函数来检查是否已单击所有链接。（我省略了内容滑块的代码以保持清晰）。

4

4 回答 4

6

给每个被点击的链接添加一个 CSS 类，然后测试有多少与总共有多少？

$(function() {
    var $all = $("ul li a");
    $all.click(function() {
        $(this).addClass("clicked");
        if($(".clicked").length === $all.length) {
           $(".submit").show();
        }
    });
});
于 2013-07-16T11:49:56.100 回答
1 
$('.wrapper li a').click(function () {
    $(this).addClass('active');
    if ($('.wrapper li a.active').length == $('.wrapper li a').length) {
        $('.wrapper').removeClass('not-active').addClass('active');
    }
});
于 2013-07-16T11:54:10.983 回答
1

你可以这样做 -

$('ul li a').on('click', function (e) {
    e.preventDefault();
    $(this).addClass('clicked');
    if ($('.clicked').length === $('ul li a').length) {
        $('.submit').show();
    }
});

演示---> http://jsfiddle.net/ddreL/5/

于 2013-07-16T11:54:11.107 回答
0

试试这个，

$(function(){
    var count = 0;
    $('a').on("click",function(){
        if(!$(this).hasClass('dummy')){
          $(this).addClass("dummy");
          count++;
        }
    });

    function submitFn(){
      var alen = $('a').length;
        if(count == alen) {
          //submit form
        }
        else{
          //throw message
        }
    }
})

jQuery

于 2013-07-16T11:53:40.067 回答