无法将类添加到按钮jQuery中

Question

我需要通过添加自定义类来更改单击按钮的颜色并显示图像，按钮在单击时显示图像但不更改其颜色，为什么？

我的css和jquery的链接：

<link href="static/dashboard/v3/css/bootstrap.min.css" rel="stylesheet">
<script src="static/dashboard/v3/js/jquery-2.1.4.js"></script>
<script src="static/dashboard/v3/js/jquery-ui.js"></script>
<script src="static/dashboard/v3/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="static/dashboard/v3/style.css" type="text/css" />
<link href="static/dashboard/v3/css/jquery-ui.css" rel="stylesheet">

这是我有按钮的部分：

<button type="button" id="peso-1" class="btn btn-default pesito">5Kg</button>
<button type="button" class="btn btn-default" id="peso-2">30kg</button>
<button type="button" class="btn btn-default" id="peso-3">200Kg</button>

单击按钮时显示图像的jQuery代码：

$('#peso-1').on("click", function() {
   $( "#img-bici" ).show();
   $( "#img-moto" ).hide();
   $( "#img-mc" ).hide();
 });
$('#peso-2').on("click", function() {
 $( "#img-bici" ).hide();
 $( "#img-mc" ).hide();
 $( "#img-moto" ).show();
});
$('#peso-3').on("click", function() {
 $( "#img-bici" ).hide();
 $( "#img-moto" ).hide();
 $( "#img-mc" ).show();
}); 

用于更改单击按钮颜色的jQuery代码：

 $('.pesito').on('click',function(){
            $(this).addClass('colorpesos');
          });

css class

.colorpesos{
  background-color: #85c440;
}