Question

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

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

我希望能够在点击时将类.icon-volume切换为.icon-volume-off。

任何可以提供帮助的人！感谢

Answer 1

尝试

    var a = document.getElementById("mute");
    a.onclick = function(e){
     var cl = a.firstChild.getAttribute('class');
     if(cl == "icon-volume"){ 
      a.firstChild.setAttribute('class','icon-volume-off');
     }else{
      a.firstChild.setAttribute('class','icon-volume');
     } 
   };

请参阅演示here

Answer 2

你可以使用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类，并确保其css优先于icon-volume类

$('#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');
    }
});

Answer 3

警告：这是（相对）新属性。继续之前，请检查compatibility table from Mozilla's Developer Network。如果IE 9（或以下）对您很重要，那么这不是您正在寻找的答案。

DOM元素有一个名为classList的属性。您应该熟悉的3种方法是add，remove和toggle。

在你的情况下：

var el = document.querySelector('i');
el.onclick = function () {
    el.classList.toggle('icon-volume');
    el.classList.toggle('icon-volume-off');
}

非常简单。

如何在点击时切换课程？

3 个答案: