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

Question

我有10个盒子，我添加了切换功能，通过添加“活动”类来选择框。我想让用户只选择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;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a href="javascript:;">link 1</a>
<a href="javascript:;">link 2</a>
<a href="javascript:;">link 3</a>
<a href="javascript:;">link 4</a>
<a href="javascript:;">link 5</a>
<a href="javascript:;">link 6</a>
<a href="javascript:;">link 7</a>
<a href="javascript:;">link 8</a>
<a href="javascript:;">link 9</a>
<a href="javascript:;">link 10</a>

Answer 3

您可以像这样编写逻辑（删除类active，如果它已经存在并返回）

$('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');
    }
})