Удалить добавленные стили с помощью кнопки

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/