使用按钮删除添加的样式

Question

我正在尝试在选中复选框时将特定样式添加到文本中，并在取消选中时将其删除，我已经设法弄清楚，代码并不漂亮，但是结果很重要。

然而，问题是这会干扰我页面上的另一个功能，该功能是用按钮激活的，所以我想要的是一个按钮函数，可以删除所有添加的样式。

我已经尝试了各种不同的方法来做到这一点，其中一个更密切的尝试是：

$("#off").click(function(){
  $("p").removeClass("classesadded");

}）;

这只会破坏以前的功能。我认为问题不在于我尝试让按钮删除样式的方式，而在于首先如何添加样式。我还尝试了一个功能，该功能会在单击时取消选中该框，该功能有效，但是当该框未选中时，样式仍然存在。

无论如何，这几乎不可能在不看到它的情况下包裹你的头，所以这里有一个小提琴：

http://jsfiddle.net/zwjz2h1x/1/

简而言之：我希望复选框添加/删除样式，以及仅在已添加样式时才删除样式的按钮。

Answer 1

你为什么不重用你为复选框准备的代码？

试试这个 ->

$('#toneclass').change(function(){
    toggle(this.checked)
});
function toggle(toggle)
{
    var c = toggle ? 'red' : '';
    $('.high').css('color', c);
    var c = toggle ? 'green' : '';
    $('.mid').css('color', c);
    var c = toggle ? 'yellow' : '';
    $('.low').css('color', c);
    var c = toggle ? 'underline' : '';
    $('.ob').css('text-decoration', c);
    var c = toggle ? '#0000FF' : '';
    $('.ob').css('-moz-text-decoration-color', c);
    var c = toggle ? '#0000FF' : '';
    $('.ob').css('text-decoration-color', c);
    var c = toggle ? '-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,1px 1px 0 black' : '';
    $('.high').css('text-shadow', c);
    var c = toggle ? '-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,1px 1px 0 black' : '';
    $('.mid').css('text-shadow', c);
    var c = toggle ? '-1px -1px 0 black, 1px -1px 0 black, -1px 1px 0 black,1px 1px 0 black' : '';
    $('.low').css('text-shadow', c);
}
//This doesn't work but I wish it did (it breaks the previous code)
//If class on turn off, If not do nothing
$("#off").click(function(){
 toggle(false);
}); 

http://jsfiddle.net/e2zht5az/1/