向类选择器“ dog”添加限制

Question

我希望这段代码使用jQuery更改3个div的类最大。

$(".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

在添加cat类之后，尝试增加计数：

$(document).ready(function () {
  var count = 0;
  $(".cat").change(function () {
    if (count < 3) {
        addClass('cat');
        count++;
    }
  });
});

Answer 2

要实现此目的，您必须再添加一项检查：类别为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/>

Answer 3

您可以在允许更改班级之前检查一下是否有少于3个“狗”（红色行）：

$(".cat, .dog").click(function() {
     var el = $(this);
     if(el.hasClass('cat') && $('.dog').length < 3) {
         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

.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/>