如何在点击时切换课程？

-1

我知道这是一个简单的问题，但我一直在玩，没有成功。我有下面的代码如何在点击时切换课程？

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

我希望能够切换类.icon批量点击时.icon卷断。

任何人谁可以帮助！感谢

来源

2014-03-04 user3000995

你说没有成功，你尝试了什么？ – ZenMaster

您可以使用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'); 
    } 
});

来源

2014-03-04 04:05:01

用户要求使用Javascript，而不是jQuery。 Javascript标签特别指出：“除非包含框架/库的标签也包含在内，否则预期会有纯JavaScript的答案。” –

尝试

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

来源

2014-03-04 04:08:42

这是如何切换类的？ –

检查更新了答案 –

警告：这是一个（相对）新的属性。在继续之前检查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'); 
}

很简单。

来源

2014-03-04 04:46:46 thealtus

如何在点击时切换课程？

回答

相关问题