如何在点击时切换类？ [英] How to toggle classes on click?

问题描述

我知道这是一个简单的问题，但我一直在玩，没有成功。
我有以下代码

I know this is a simple question but I have been playing around with no success. I have the following code

<a id="mute"><i class="icon-volume"></i></a>

我想能够将类.icon-volume切换到.icon-volume-off

I want to be able to toggle the class .icon-volume to .icon-volume-off when clicking.

任何可以帮助的人！
感谢

After anyone who can help! Thanks

推荐答案

您可以使用jQuery

You could use jQuery

$('#mute').on('click', function () {
    var el = $(this).find('i');
    if (el.hasClass('icon-volume')) {
         el.removeClass('icon-volume');
         el.addClass('icon-volume-off');
    } else {
        el.removeClass('icon-volume-off');
        el.addClass('icon-volume');
    }
});

或者您只需添加 icon-volume-off class并确保其css优先于 icon-volume 类

Or you could just add the icon-volume-off class and make sure its css takes precedence over the icon-volume class

$('#mute').on('click', function () {
    var el = $(this).find('i');
    if (el.hasClass('icon-volume-off')) {
         el.removeClass('icon-volume-off');
    } else {
        el.addClass('icon-volume-off');
    }
});

这篇关于如何在点击时切换类？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！