Jquery:检查是否已单击列表中的所有链接
Jquery: Check if all links in a list have been clicked on
我正在制作一个化身创建者。用户有一个链接列表,他们必须点击这些链接来定制化身选项。
列表下面是一个提交按钮。我只想在用户点击所有链接时显示提交按钮(这是一种响应式设计,所以这只会在移动设备上发生)。
我如何使用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代码,因为我不确定使用哪个函数来检查是否所有链接都被点击了。(为了保持清晰,我省略了内容滑块的代码)。
给每个点击的链接添加一个CSS类,然后测试总共有多少个,怎么样?
$(function() {
var $all = $("ul li a");
$all.click(function() {
$(this).addClass("clicked");
if($(".clicked").length === $all.length) {
$(".submit").show();
}
});
});
$('.wrapper li a').click(function () {
$(this).addClass('active');
if ($('.wrapper li a.active').length == $('.wrapper li a').length) {
$('.wrapper').removeClass('not-active').addClass('active');
}
});
你可以这样做-
$('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/
试试这个,
$(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
相关文章:
- 如何使此链接列表受cookie支持
- 如何创建加号[+]减号[-]切换,以扩展链接列表,并与Opera Mini兼容
- 使用 JavaScript 从链接列表中获取链接名称
- 如何显示网页中使用的超链接列表
- 使用 javascript 创建 web2py 链接列表
- 如何从节点和链接列表创建 d3 径向树
- 如何为数据库中的不同记录/行创建用户生成的链接列表,这些记录/行在单击时填充 html 表单
- 点击链接列表会弹出一个使用fancybox的图片库
- 为文件夹[javascript]中的文件生成URL链接列表
- 读取Javascript数组时生成链接列表
- 上一次完成后,立即加载一个链接列表
- 如何使用javascript Randomizer脚本链接到iframe,以便我可以从脚本中的链接列表中打开
- Node.js中的链接列表
- 如何在JSON上添加超链接列表项
- 如何在jQuery中创建一个图像链接列表
- Casperjs使用casper.each迭代链接列表
- 如何浏览作为链接列表的url数组以及上一个/下一个链接
- Chrome在新窗口中打开链接列表,而不是选项卡
- element.childNodes[]是否在javascript中表现为链接列表
- Jquery移动1.4.5动态页面中的动态链接列表