达到最大附加项时的切换类答案

【问题标题】：toggleClass when maximum amount of appended items is reached达到最大附加项时的切换类
【发布时间】：2013-08-26 11:23:17
【问题描述】：

当达到最大附加项时，是否可以在按钮上使用切换类？

我希望最多 6 个附加的 div/项目。我添加了一个变量计数器。因此，当添加一个项目时它会增加，而当单击删除按钮时它会减少。最后一步是对按钮进行切换分类（如禁用按钮）。所以当达到最大数量时，按钮toggleClass = red。

我想要什么：

在第六个附加项目上，按钮背景变为红色，不再附加任何项目（禁用）。当用户删除一个按钮时，按钮会切换回其原始状态，并且按钮会再次触发附加事件。如何在我的代码中集成 toggleClass？

HTML

<div id="addbutton">ADD</div>
<div id="box"></div>

var amount = 0;
var div = '<div>' +
    '<input type="text"/>' +
    '<input type="button" class="removebtn" value="delete"/>' +
    '</div>';

$('#addbutton').click(function () {
    amount++;
    if (amount < 6) {
        $('#box').append(div);
        //alert(amount);
    } else {
        $(this).toggleClass(".red");
    }
});


$('.removebtn').live('click', function () {
    $(this).parent().remove();
    amount--;
});

JSFIDDLE

【问题讨论】：

标签： jquery html append limit toggleclass

【解决方案1】：

更新了小提琴以更好地工作。仅在您实际添加时才增加金额。否则如果人们继续点击添加，即使它是红色的，数量也会增加。

试试这个更新小提琴：http://jsfiddle.net/V395Y/2/

基本上你使用 addClass 和 removeClass。我更新了 Jquery 和你的 CSS（重要部分）

$(this).addClass("red");
$('#addbutton').removeClass('red');
background: red !important;

由于您的按钮已经有一个类，因此 Red 类的 bgcolor 必须是 !important。这告诉浏览器，在红色类出现的情况下，红色比黄色更重要。当您删除类时，ofc 仅保留黄色（默认）类，并且按钮恢复为黄色。

【讨论】：

谢谢！！你能再解释一下!important部分吗？