javascript - 我怎样才能摆脱这段代码中的重复

Question

我的代码中有很多 $(this).css() ......我是 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')灰色背景。