切换function到点击事件的有限标签

我有10个盒子，我添加了切换function，通过添加“活动”类来选择框。 我想让用户只选择6个盒子。 当用户选择6个盒子时，它不允许选择其他工作正常的盒子。 我的问题是我想再次改变我的选择，但这不是让我这样做的。 下面是代码：`

$('a').click(function() { if ($('.active').length < 6) { $(this).toggleClass('active') } else { alert('more then 6 selection not allowed') } }) 

`我想改变我的选择，但不要放手，因为条件是真的。 如何取消选中所选框，请帮忙！

Answer 1

您希望使用hasClass来确定是否可以撤消选择。

这样，如果它是一个取消选择，它是允许的。

 $('a').click(function() { if ($('.active').length < 6 || $(this).hasClass('active')) { $(this).toggleClass('active') } else { alert('more then 6 selection not allowed') } }) 

Answer 2

这很容易。

你应该使用这个条件：

 if ($('.active').length < 6 || $(this).hasClass('active')) 

运行我的代码：

 $('a').click(function(e) { e.preventDefault(); if ($('.active').length < 6 || $(this).hasClass('active')) { $(this).toggleClass('active') } else { alert('more then 6 selection not allowed') } }) 

 a.active{background:yellow;} 

  link 1 link 2 link 3 link 4 link 5 link 6 link 7 link 8 link 9 link 10 

Answer 3

您可以像这样编写逻辑（如果已经有并且返回，则删除该类）

 $('a').click(function() { if($(this).hasClass("active")) { $(this).removeClass("active"); return; } if ($('.active').length < 6) { $(this).toggleClass('active'); } else { alert('more then 6 selection not allowed'); } })