javascript - 为什么removeClass不能正常工作？

我正在尝试使某些效果起作用，但我做不到。我有一个div列表，我想要4个按钮。

1）加载更多

2）少显示

3）更改最大值

4）变更分钟

我做了一个JSFiddle。我不知道为什么在JSFiddle上removeClass和addClass不起作用，因为在我的计算机上它们起作用。

$(document).ready(function () {
    $('#changeMax').on('click', function(){
        $('li.col-md-3').addClass('fullwidth');
    });
    $('#changeMin').on('click', function(){
        $('li.col-md-3').removeClass('fullwidth');
    });
});

$(document).ready(function () {
    size_li = $(".row li").size();
    x=3;
    $('.row li:lt('+x+')').show();
    $('#loadMore').click(function () {
        x= (x+5 <= size_li) ? x+4 : size_li;
        $('.row li:lt('+x+')').show("fast");
    });
    $('#showLess').click(function () {
        x=(x-5<0) ? 4 : x-4;
        $('.row li').not(':lt('+x+')').hide("fast");
    });
});

我将通过计算机解释我的问题。前三个按钮与动画一起使用。 removeClass有效，但不能与动画一起使用。我试过了，但是没有用。

谢谢

最佳答案

由于specificity，其他规则具有更高的价值

规则.row li.col-md-3{的值大于.fullwidth，因此新宽度将不适用。

更改

.fullwidth{

至

.row li.fullwidth{

它将开始工作。