如何在 jq 中添加和删除类？答案

【问题标题】：How to add and remove classes in jq?如何在 jq 中添加和删除类？
【发布时间】：2014-10-08 04:06:42
【问题描述】：

您好，请解决我的问题。搜索了几个小时，但没有找到合适且有效的解决方案，所以最后我决定在这里发布。

这里是 HTML

<body>
    <div id="first">
            <img src="Untitled-1.png" width="300px" height="300px">
            <img src="Untitled-1.png" width="300px" height="300px"> <br>
            <button id="start" >START</button>
            <button id="stop">STOP</button>
            <button id="slow" >SLOW</button>
            <button id="fast" >FAST</button>   
    </div>     
</body>

这是我的 CSS：

<style>
.anim{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:500ms;
    animation-iteration-count:infinite;     
    }
    .slow{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:1500ms;
    animation-iteration-count:infinite;     
    }
    .fast{      
    animation-name:test;
    animation-delay:0s;
    animation-direction:normal;
    animation-timing-function:linear;
    animation-duration:200ms;
    animation-iteration-count:infinite; 
}

@keyframes test{
    0%{transform:rotateZ(0deg);}
    50%{transform:rotateZ(180deg);}
    100%{transform:rotateZ(360deg);}
}  
</style>

这里是 jQuery：

$(document).ready(function(){ 
        $('#first').on('click','#start',function(){
        $('img').addClass('anim');
        });

        $('#first').on('click','#stop',function(){
        $('img').removeClass();
        });

        $('#first').on('click','#slow',function(){
        $('img').removeClass().addClass('slow');

        });

        $('#first').on('click','#fast',function(){
        $('img').removeClass().addClass('fast');
        });     

});

看看 jQuery.. 我想根据按下的按钮将类（无论应用哪个）更改为另一个类。如果按下“慢”按钮，则应删除现有类并应用“.slow”类。我在互联网上甚至在这个论坛上尝试了所有建议的方法，但没有奏效。我尝试将此代码作为其他人的建议

$('#first').on('click','#slow',function(){
$('img').removeClass().addClass('slow');});

但不工作。

【问题讨论】：

@entropic: Uhm " 如果参数中没有指定类名，所有的类都会被移除。".您还必须阅读文档，而不仅仅是找到它；）
真的吗？当文档明确表明您错了时，您告诉他阅读文档吗？ OP，当我尝试将其放入 jsfiddle 时，它似乎按预期工作。
哇，以前从来不知道。我想我也应该尝试阅读文档。我的坏..我会删除我的评论。
这是我用来测试的jsfiddle。
正如您在 jsFiddle Antoine 发布的 (jsfiddle.net/7yqhyngo) 中看到的那样，添加和删除类是有效的。问题是通过类接收的新 CSS 属性不会更新动画本身。再说一遍：您的问题与添加和删除类无关。这是您的代码的另一个示例：jsfiddle.net/pgp8fLfL/2。请注意边框颜色的变化，这证明更改类“有效”。

标签： jquery css addclass removeclass toggleclass

【解决方案1】：

最后我设法解决了这个问题.. 实际上我使用的是'prefix-free.js'，它没有正确编码为chrome。一旦我更改了浏览器并在 Firefox 上运行该代码，它就可以完美运行。由于那个prefex-free.js，我没有申请-webkit-或-moz-。好的谢谢所有参与的人..

已编辑：抱歉，prefix-free.js 与此问题无关。问题是由于 CHROME 浏览器造成的。我已将此问题报告给 chrome 的开发人员。我希望他们能优先解决这个问题。

【讨论】：

【解决方案2】：

试试这个

$(document).ready(function(){ 
    $('#first').on('click','#start',function(){
    $('img').addClass('anim');
    });

    $('#first').on('click','#stop',function(){
    $('img').removeClass();
    });

    $('#first').on('click','#slow',function(){
    $('img').removeClass().addClass('slow');

    });

    $('#first').on('click','#fast',function(){
    $('img').removeClass().addClass('fast');
    });

});

【讨论】：

@HarutyunAbgaryan 您编写的代码与所讨论的代码相同。它有什么意义？再说一遍：问题不在于添加-删除类，而在于这些类的动画。
你写的代码和我的问题一样？？？有什么不同？我的朋友@HarutyunAbgaryan，你已经改变了 css .. 试试动画吧.. 谢谢

【解决方案3】：

你可以尝试删除类

$("img").removeAttr('class');

然后用

添加新的类

$("img").attr('class', 'new-classes');

【讨论】：

你为什么建议这个？ removeClass 有什么问题，为什么您的解决方案会在这里有所帮助？
如果你不知道一个元素有哪些类，这很有用。
@Monte .removeClass() 将删除所有元素的类。
我也不必知道 removeClass 的元素有哪些类。
嗯，这个问题说 removeClass 方法不起作用，所以我提出了另一个没有错的建议，我想。