Question

当达到最大量的附加项目时，是否可以在按钮上使用toggleclass？

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

我想要的是什么：

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

HTML

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

JS

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

Answer 1

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

尝试此更新小提琴：http://jsfiddle.net/V395Y/2/

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

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

由于您的按钮已经有一个类，因此Red类的bgcolor必须是！important。这告诉broswer，红色的类红色比黄色更重要。删除类时，ofc只保留黄色（默认）类，按钮恢复为黄色。

达到最大附加项目数时的toggleClass

1 个答案: