javascript - how can i get rid of duplication in this code -

I have $ (this). CSS () There is a lot in my code ... I am new to JS therefore I am $ (".btn-pvPanels") What is the best way to remove this break is, ). ('Click', function {var selected; selected = $ (this) .val (); if (selected === "on-panel") {$ (this) .css ({'background': 'Orange', 'color': 'white'}); $ (this) .parent (). ('.btn-off'). CSS ({'background': '# F1F1F1' 'Color': '# 8E8D8D'} $ ('.aon_poff'). Feidin ('slow');} and if (selected === "off-panel") {$ (this) .css ({'background ':' ('.' '' Color ':' white '}); $ (this) .Parent (). (' BTN-on '). CSS ({' background ':' # F1F1F1 $ '(' .aon_poff ') .Fedhat (' slow ');} and if (selected === "on-access") {$ (this) .css ({ 'Backgro Und ':' orange '("btn-on"). Css ({' background ':' # F1F1F1 ',' color ':' # 8E8D8D '});} And if (selected === "on-exchange" & amp; "over-panel") {$ (this). CSS ({'background': 'orange', 'color': 'white'}); $ (This) .Parent () Find ('.btn-on') .css ({'background': '# F1F1F1', 'color': '# 8E8D8D'}); Warning ('O')}} ); $ (".btn-stuff"). ('Click', function (event) {var selected; selected = $ (this) .val (); If (selected === "on-acquisition") {$ (this). CSS ({'background': 'orange', 'color': 'white'}); $ (This). Parent (). ('.btn-off') search. Css ({'background': '$ F1F1F1', 'color': '# 8E8D8D'}; $ ('.aoff_pon'). Feidin ('slow');} and if (selected === "off-accessories" ) {$ (This) .css ({'background': 'orange', 'color': 'white'}); $ (this) .Parent (.). ('.btn-on') .css ({ 'Background': '# F1F1F1', 'color': '# 8E8D8D'}) $ ('.aoff_pon') .Fedot ('slow');}}); Use CSS class names in style:

     
 
  
 Now  .css ()  Instead of setting you can use it:  
  addClass ('selected')  and  removeClass ('selected')  for orange background.  
  addClass ('unselected')  and  removeClasS ('unselected')  for gray background.