Как я могу избавиться от дублирования в этом коде

Question

У меня есть $ (this) .css() много в моем коде ... im new для JS, поэтому я не уверен, что лучший способ удалить это дублирование и сделать мой код чистый ...

вот ссылка на мою скрипку http://jsfiddle.net/d0okie0612/7Y2Qp/

$(".btn-pvPanels").on('click', function(event) { 
    var selected; 
    selected = $(this).val(); 
    if(selected === "on-panel") { 
    $(this).css({ 
    'background': 'orange', 
    'color': 'white' 
    }); 
    $(this).parent().find('.btn-off').css({ 
    'background': '#F1F1F1', 
    'color': '#8E8D8D' 
    }); 
    $('.aon_poff').fadeIn('slow'); 
    } 

else if(selected === "off-panel") { 
    $(this).css({ 
    'background': 'orange', 
    'color': 'white' 
    }); 
    $(this).parent().find('.btn-on').css({ 
    'background': '#F1F1F1', 
    'color': '#8E8D8D' 
    }); 
    $('.aon_poff').fadeOut('slow'); 
    } 

else if(selected === "on-accessories") { 
    $(this).css({ 
    'background': 'orange', 
    'color': 'white' 
    }); 
    $(this).parent().find('.btn-on').css({ 
    'background': '#F1F1F1', 
    'color': '#8E8D8D' 
    }); 

    } 

else if(selected === "on-accessories" && "on-panel") { 
    $(this).css({ 
    'background': 'orange', 
    'color': 'white' 
    }); 
    $(this).parent().find('.btn-on').css({ 
    'background': '#F1F1F1', 
    'color': '#8E8D8D' 
    }); 
    alert('hey') 
    } 

}); 


    $(".btn-accessories").on('click', function(event) { 
var selected; 
selected = $(this).val(); 
if(selected === "on-accessories") { 
    $(this).css({ 
    'background': 'orange', 
    'color': 'white' 
    }); 
    $(this).parent().find('.btn-off').css({ 
    'background': '#F1F1F1', 
    'color': '#8E8D8D' 
    }); 
    $('.aoff_pon').fadeIn('slow'); 
    } 

else if(selected === "off-accessories") { 
    $(this).css({ 
    'background': 'orange', 
    'color': 'white' 
    }); 
    $(this).parent().find('.btn-on').css({ 
    'background': '#F1F1F1', 
    'color': '#8E8D8D' 
    }); 
    $('.aoff_pon').fadeOut('slow'); 
    } 



}); 

Answer 1

имена классов Использование CSS в стиле:

.selected { 
    background-color: orange; 
    color: white; 
} 
.deselected { 
    background-color: #F1F1F1; 
    color: #8E8D8D; 
} 

Теперь вместо установки .css() вы можете использовать:

addClass('selected') и removeClass('selected') для оранжевого фона.

addClass('deselected') и removeClasS('deselected') для серого фона.