另一种的切换功能

js:

var isclick=false;
$(function () {
$("label").on({
mouseover:function(){
console.log(1);
$(this).addClass('clicks');
$(this).removeClass('point_amount_label');
$(this).siblings('label').removeClass('clicks');
$(this).siblings('label').addClass('point_amount_label');
},
mouseout:function(){
if(!isclick){
$(this).addClass('point_amount_label');
$(this).removeClass('clicks');
$(this).children().remove();
}
},
click:function(){
$(".amount_input ").val('').focus();
$('.red-text').text($(this).attr('amount'));
$(this).siblings('label').removeClass('click');
$(this).siblings('label').addClass('point_amount_label');
$(this).siblings('label').children().remove();
$(this).addClass('click');
$(this).removeClass('point_amount_label');
$(this).append('<div class="arrow-down"></div>');
isclick=true;
}
});

$('.amount_input').blur(function(){
var val=$('.amount_input').val();
$('.red-text').text(val);

});

})

html:

<label id="credit_amount_20" class=" click " amount="20">¥20.00<div class="arrow-down"></div></label>
<label id="credit_amount_50" class="point_amount_label " amount="50">¥50.00</label>
<label id="credit_amount_100" class="point_amount_label " amount="100">¥100.00</label>
<label id="credit_amount_0" class="point_amount_label " >其他金额</label>

css

.point_amount_label{
120px;
height: 40px;
display: block;
float: left;
margin: 0 10px 0 0;
text-align: center;
border: 1px solid #e8e8e8;
background-color: #f7f7f7;
color: #999;
cursor: pointer;
line-height: 40px;
}
.click{
border: 2px solid #1ba9d9;;
color: #1ba9d9;
120px;
height: 40px;
display: block;
float: left;
margin: 0 10px 0 0;
text-align: center;
line-height: 40px;
}
.clicks{
border: 2px solid #1ba9d9;;
color: #1ba9d9;
120px;
height: 40px;
display: block;
float: left;
margin: 0 10px 0 0;
text-align: center;
line-height: 40px;
}