javascript - 给类选择器添加限制 "dog"

Question

我希望此代码使用 jQuery 更改 3 个 div 的类 ma​​ximum。

$(".cat, .dog").click(function() {
     var el = $(this);
     if(el.hasClass('cat')) {
         el.removeClass('cat');
         el.addClass('dog');

     } else {
         el.removeClass('dog');
         el.addClass('cat');
     }
});

// I tried with this code but it does not work, since I can keep dialing more than 3

$(document).ready(function () {
    $(".cat").change(function () {
        var maxAllowed = 3;
        var cnt = $(".dog").length;
        if (cnt > maxAllowed) {
            addClass('cat');
        }
    });
});

.cat {
  background-color: #dadada;
}
.dog {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="cat">jQuery</div>
<br/>
<div class="cat">JavaScript</div>
<br/>
<div class="cat">Prototype</div>
<br/>
<div class="cat">Dojo</div>
<br/>
<div class="cat">Mootools</div>
<br/>

Answer 1

为此，您必须再添加一项检查:dog 类元素的数量应小于 maxAllowed 值。条件应该看起来像这样:

el.hasClass('cat') && activeDogs < maxAllowed // activeDogs - the amount of elements with class "dog"

最后你会得到类似的东西:

var maxAllowed = 3;
$(".cat, .dog").click(function() {
     var el = $(this);
     var activeDogs = $('.dog').length;
     if (el.hasClass('cat') && activeDogs < maxAllowed) {
         el.removeClass('cat');
         el.addClass('dog');
     } else {
         el.removeClass('dog');
         el.addClass('cat');
     }
});

.cat {
  background-color: #dadada;
}

.dog {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cat">jQuery</div>
<br/>
<div class="cat">JavaScript</div>
<br/>
<div class="cat">Prototype</div>
<br/>
<div class="cat">Dojo</div>
<br/>
<div class="cat">Mootools</div>
<br/>

我每次都得到 $('.dog').length，因为我猜，不仅可以通过此函数添加/删除类。但如果是这样，您可以简单地使用计数器来实现，并将计数器与 maxAllowed 变量进行比较，此操作将占用更少的资源。

var maxAllowed = 3;
var activeDogs = 0;
$(".cat, .dog").click(function() {
     var el = $(this);
     if (el.hasClass('cat') && activeDogs < maxAllowed) {
         el.removeClass('cat');
         el.addClass('dog');
         activeDogs++;
     } else if (el.hasClass('dog')) {
         el.removeClass('dog');
         el.addClass('cat');
         activeDogs--;
     }
});

.cat {
  background-color: #dadada;
}

.dog {
  background-color: red;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div class="cat">jQuery</div>
<br/>
<div class="cat">JavaScript</div>
<br/>
<div class="cat">Prototype</div>
<br/>
<div class="cat">Dojo</div>
<br/>
<div class="cat">Mootools</div>
<br/>