<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>无标题文档</title>
</head>
<style>
*{ padding:0; margin:0; list-style:none;}
.list{ width:200px; margin:50px auto;}
.list li{ padding:5px 0; border-bottom:1px solid #000;}
.list li b{ border:1px solid #ccc; height:24px; width:24px; display:inline-block; text-align:center; vertical-align:middle; cursor:pointer;}
.list li b.bg{ background:#52b9e9;}
.list span{ width:30px; height:24px; display:inline-block; text-align:center; line-height:24px;}
</style>
<body>
<ul class="list">
<li><b class="reduce">-</b><span></span><b class="add bg">+</b></li>
<li><b class="reduce">-</b><span></span><b class="add bg">+</b></li>
<li><b class="reduce">-</b><span></span><b class="add bg">+</b></li>
</ul>
<script type="text/javascript" src="js/jquery-1.11.1.min.js"></script>
<script type="text/javascript">
$(function(){
$(".list li span").html("1");
$(".list li b").click(function(){
var $num=$(this).parent(".list li");
var num=parseInt($num.find("span").text());
if($(this).hasClass("add")){
num++;
if(num>1){
$num.find(".reduce").addClass("bg");
}
$num.find("span").html(num);
}else{
if(num==1){
num=1;
$num.find(".reduce").removeClass("bg");
}else{
num--;
$num.find("span").html(num);
};
}
});
})
</script>
</body>
</html>问题是：
当数量>1时减号背景变蓝，当数量为1时，减号背景变白，现在是为1时要点两次才会变白，最后如果把js封装成函数该如何写？
因为变1的时候.bg这个没有移除
$(function(){
$(".list li span").html("1");
$(".list li b").click(function(){
var $num=$(this).parent(".list li");
var num=parseInt($num.find("span").text());
if($(this).hasClass("add")){
num++;
if(num>1){
$num.find(".reduce").addClass("bg");
}
}else{
if(num <=2){
num=1;
$num.find(".reduce").removeClass("bg");
}else{
num--;
}
}
$num.find("span").html(num);
});
})