为什么removeClass不能正常工作

Why is removeClass not working properly?

本文关键字：工作 常工作 removeClass 不能 为什么      更新时间：2023-09-26

我试图让一些效果发挥作用，但我做不到。我有一个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可以工作，但不能用于动画。我试过了，但没用。

感谢

由于特殊性，其他规则的值更高

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

更改

.fullwidth{

至

.row li.fullwidth{

它将开始工作。

只是一些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;
}

这表明添加了fullwidth类：

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