Question

我试图让一些效果起作用，但我不能。我有一个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");
    });
});

我会从电脑上解释我的问题。前3个按钮用于动画。 removeClass可以工作但不能用于动画。我试过了，但它没有用。

由于

Answer 1

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

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

更改

.fullwidth{

到

.row li.fullwidth{

它将开始起作用。

Answer 2

只是一些css问题。

快速解决方法是使用!important，但并不总是建议这样做。

.fullwidth{
    width: 100% !important;
    -webkit-transition: all 1s ease-in-out;
    -moz-transition: all 1s ease-in-out;
    -o-transition: all 1s ease-in-out;
    transition: all 1s ease-in-out;
}

Answer 3

这表明添加了全宽类：

$('#changeMax').on('click', function(){
        $('.row li.col-md-3').addClass('fullwidth');
        alert($('.row li.col-md-3')[0].className);
});

为什么removeClass无法正常工作？

3 个答案: