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

Question

我有元素 list 。

OnClick 任何项目，我将 active 类切换到该项目。如果它有 3 事件元素，我将显示错误 div。到目前为止，它工作正常。

我想要的是:

在active类达到3后，我想禁用其他元素的此功能。仅当我取消单击任何 active 元素(与错误 div 相同)时，我才可以执行此操作。

Online Demo

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>

Answer 1

试试这个

$(document).ready(function(){

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

});