jQuery-onClick将类添加到最多3个元素

我有一份物品清单

单击要切换到该项目的

活动
类的任何项目。如果它有3个活动元素，我将显示error div。在此之前，它工作正常

我想要的是：

在将
active
类转到3后，我想对其他元素禁用此功能。只有当我松开任何
活动的
元素（与error div相同）时，才允许我这样做


jQuery

$(document).ready(function(){

  var limit = 3;
  $("ul li").on("click", "a", function(e){
    e.preventDefault();
    $(this).toggleClass("active");
    if($("ul li a.active").length >= limit) {
      $("#message").slideDown();
    }else{
     $("#message").slideUp();
    }
  });

});

HTML

<div class="container">

  <div id="message">You have reached maximum</div>

  <div id="box1" class="box-containter">
    <h3>Box 1</h3>
    <ul>
      <li><a href="#">Item 1</a></li>
      <li><a href="#">Item 2</a></li>
      <li><a href="#">Item 3</a></li>
      <li><a href="#">Item 4</a></li>
      <li><a href="#">Item 5</a></li>
    </ul>
  </div>

  <div id="box2" class="box-containter">
    <h3>Box 2</h3>
    <ul>
      <li><a href="#">Item 6</a></li>
      <li><a href="#">Item 7</a></li>
      <li><a href="#">Item 8</a></li>
      <li><a href="#">Item 9</a></li>
      <li><a href="#">Item 10</a></li>
    </ul>
  </div>

  <div id="box3" class="box-containter">
    <h3>Box 3</h3>
    <ul>
      <li><a href="#">Item 11</a></li>
      <li><a href="#">Item 12</a></li>
      <li><a href="#">Item 13</a></li>
      <li><a href="#">Item 14</a></li>
      <li><a href="#">Item 15</a></li>
    </ul>
  </div>

</div>


您已达到最大值
方框1







方框2







方框3







试试这个


$（文档）.ready（函数（）{
var限值=3；
$（“ul li”）。在（“点击”，“a”，功能（e）{
e、 预防默认值（）；
如果（$（“ul li a.active”）。长度=限制）{
$（“#消息”）.slideDown（）；
}否则{
$（“#消息”）.slideUp（）；
}
});
});下面的工作代码和

另一种变体。您只需稍微更改代码就地切换
active

如果显示
消息
，则始终切换为false
反之亦然
像这样

$(this).toggleClass("active",
    !$("#message").is(':visible') && // if message visible always false
    !$(this).hasClass('active')); //toggle active class

样品


$（文档）.ready（函数（）{
var限值=3；
$（“ul li”）。在（“点击”，“a”，功能（e）{
e、 预防默认值（）；
$（this）.toggleClass（“active”、！$（“#message”）。是（':visible'）&&！$（this）.hasClass（“active”）；
如果（$（“ul li a.active”）。长度>=限制）{
$（“#消息”）.slideDown（）；
}否则{
$（“#消息”）.slideUp（）；
}
});
});
body{font-family:verdana；字体大小：13px；}
.container{宽度：600px；边距：自动；}
a{color:#000；}
a、 活动{颜色：红色；字体大小：粗体；文本装饰：无；}
.box容器{浮动：左；宽度：30%；边距：0；填充：0；}
ul li{margin:5px；}
#消息{显示：无；背景：#ccc；文本对齐：居中；填充：5px；颜色：红色；边距：50px；边框：1px实心#222；}

您已达到最大值
方框1







方框2







方框3








$(this).toggleClass("active",
    !$("#message").is(':visible') && // if message visible always false
    !$(this).hasClass('active')); //toggle active class