使用按钮删除添加的样式

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/