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

Question

我有物品清单。

我正在将 active 类切换到该项目的任何项目的 OnClick。如果它有 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();
    }
  });

});

Answer 2

下面的工作代码和Demo

$(document).ready(function(){

  var limit = 3;
  $("ul li").on("click", "a", function(e){
    e.preventDefault();

    if($("ul li a.active").length >= limit) {
      $("#message").slideDown();
      if($(this).hasClass("active"))
      {
      $(this).toggleClass("active");
       $("#message").slideUp();
      }

    }else{
     $("#message").slideUp();
     $(this).toggleClass("active");
    }
  });

});

Demo

Answer 3

又一个变种。你应该稍微改变你的代码 toggle active。

1. 如果message 可见，则始终切换为false
2. 否则反转类

这样

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

样本

$(document).ready(function(){

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

});

body{font-family:verdana;font-size:13px;}
.container{width:600px;margin:auto;}
a{color:#000;}
a.active{color:red;font-weight:bold;text-decoration:none;}
.box-containter{float:left;width:30%;margin:0;padding:0;}
ul li{margin:5px;}
#message{display:none;background:#ccc;text-align:center;padding:5px;color:red;margin:50px;border:1px solid #222;}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<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>