数量不足，js置相应的颜色尺码不可点击，如何去除a:hover样式？
做商品详细页面，商品数量=0，则相对应颜色尺码不能点击，
[颜色1] [颜色2] [颜色3]
[尺码1][尺码2][尺码3][尺码4]
点击[颜色1]，如果[尺码1][尺码3]，如果[尺码1][尺码3]数量=0，则置[尺码1][尺码3]不可点击
点击[尺码1]，如果[颜色2][颜色3]，如果[颜色2][颜色3]数量=0，则置[颜色2][颜色3]不可点击
a) 初始样式设为 a{borer:1px solid #ccc} a:hover{2px solid #F00;}
b)有颜色、尺码都有click事件
---------------------------分隔线------------------------------------------------------------
现有几个问题，一直解决不了：
1) 给a重新绑样式,新样式中的的border不起作用，但是color居然起作用了?
2)如果给a直接赋border{1px dotted #ccc},则hover样式仍存在
3)click事件 unbind掉到，再用bind()再新恢复click事件无效
---------我想要实现的结果是：-----------------------
没有数量颜色或尺码，鼠标hover没有样式，并且的不可点击
---------------附代码-------------------
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>无标题文档</title>
<script src="http://192.168.1.30/js/jquery-1.8.1.min.js"></script>
<style>
.pro-size-parameter{ padding:8px 0; padding-left:70px;}
.pro-size-select{margin:0 auto;}
.pro-size-select li{ float:left; height:28px; position:relative; margin:2px 6px 2px 0; outline:none;}
.pro-size-select li a{ height:24px; padding:1px 6px; border:1px solid #ccc; background:#fff; display:inline-block; line-height:24px;}
.pro-size-select li a:hover{ border:2px solid #e4393c; padding:0 5px; text-decoration:none;}
.pro-size-select li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(/images/pro-size-selected.gif) no-repeat right bottom; z-index:99; display:none;}
.pro-size-select li.selected a{ border:2px solid #e4393c; padding:0 5px;}
.pro-size-select li.selected i{ display:block;}
.pro-selectedSize{padding-left:6px;}
.pro-img-select{}
.pro-img-select li{ float:left; height:54px; position:relative; margin:2px 6px 2px 0;}
.pro-img-select li a{height:50px; width:50px; padding:1px; border:1px solid #ccc; float:left; background:#fff; display:inline-block; outline:none;}
.pro-img-select li a img{ width:50px; height:50px; display:block;}
.pro-img-select li a:hover{ border:2px solid #e4393c; padding:0; text-decoration:none;}
.pro-img-select li i{ position:absolute; width:10px; height:10px; font-size:0; line-height:0; right:2px; bottom:2px; background:url(/images/pro-size-selected.gif) no-repeat right bottom; z-index:99; display:none;}
.pro-img-select li.selected a{ border:2px solid #e4393c; padding:0;}
.pro-img-select li.selected i{ display:block;}
.pro-sieze-parameter dd {float:left;}
.pro-sieze-parameter dt {float:left;}
.dt-size{line-height:32px}
.dt-img{line-height:54px}
/*没有数据时尺码的样式*/
.sizenodata{ }
.sizenodata a{height:24px; padding:1px 6px; background:#fff; display:inline-block; line-height:24px;cursor:url(/css/no.cur),auto;color:#f23;border:10px solid #999;}
/*没有数据时颜色的样式*/
.imgnodata{}
.imgnodata li a{border:1px dotted #ccc;cursor:url(/css/no.cur),auto;}
</style>
<script>
//选择颜色尺码
$(document).ready(function(){
$(".pad").each(function() {
var i = $(this);
var p = i.find("ul>li");
p.click(function() {
if (!!$(this).hasClass("selected")) {
// $(this).removeClass("selected");
//i.removeAttr("data-cidval");
// $("#hdn_currentcolor").val("");
} else {
$(this).addClass("selected").siblings("li").removeClass("selected");
}
pf_getProductSL("15",$(this).attr("color"),"")
})
})
//选择颜色尺码
$(".prosize02").each(function() {
var i = $(this);
var p = i.find("ul>li");
p.click(function() {
if (!!$(this).hasClass("selected")) {
} else {
$(this).addClass("selected").siblings("li").removeClass("selected");
}
pf_getProductSL("15","",$(this).attr("title"))
})
})
})
//颜色尺码
function pf_getProductSL(pProductId, pColor, pSize) {
var nodataColorList = "", nodataSizeList = "",nodataList="";
nodataList = "_S_1$_M_2$_L_2$_XL_1$"; //数量为0的颜色尺码列表
if (nodataList != "") {
// nodataList = nodataList;
var arr2 = nodataList.split("$");
for (var j = 0; j < arr2.length - 1; j++) {
var size = arr2[j].substring( arr2[j].indexOf("_")+1,arr2[j].lastIndexOf("_"));
var color = arr2[j].substring(arr2[j].lastIndexOf("_") + 1);
//alert("color:" + color +"--size:" + size);
if (pSize != "") {
if (pSize == size) {
nodataColorList += color + ",";
}
}
if (pColor != "") {
if (pColor == color) {
nodataSizeList += size + ",";
}
}
}
//alert(pColor);
//alert(nodataColorList);
//置数量为0的颜色为不可用状态
//alert("没有数量的颜色号--" + nodataColorList);
if (nodataColorList != "") {
nodataColorList = "," + nodataColorList;
pf_setColorDisabled(nodataColorList);
}
//置数量为0的尺码为不可用状态
//alert("没有数量的尺码--" + nodataSizeList);
if (nodataSizeList != "") {
nodataSizeList = "," + nodataSizeList;
pf_setSizeDisabled(nodataSizeList);
}
} //end nodataList != ""
}
function pf_setColorDisabled(nodataColorList) {
$(".pad ul>li").each(function() {
var i = $(this);
var liColor = i.attr("data-cid");
liColor = liColor.substring(liColor.lastIndexOf("-") + 1);
liColor = "," + liColor + ",";
if (nodataColorList.indexOf(liColor) > -1) {
i.unbind("click");
i.find("a").css("border", "1px dotted #ccc");
i.find("a").css("padding", "1px");
i.find("a").css("cursor", "url(/css/no.cur),auto");
} else {
i.bind("click");
/* i.find("a").removeClass("imgnodata");*/
i.find("a").css("border", "1px solid #ccc");
i.find("a").css("padding", "1px");
i.find("a").css("cursor", "hand");
i.find("a").css("hover", "2px solid #f00");
}
})
}
function pf_setSizeDisabled(nodataSizeList) {
$(".prosize02 ul>li").each(function() {
var i = $(this);
var liSize = i.attr("title");
liSize = "," + liSize + ",";
if (nodataSizeList.indexOf(liSize) > -1) {
i.addClass("sizenodata");
i.unbind("click");
} else {
i.bind("click");
i.removeClass("sizenodata");
}
})
}
</script>
</head>
<body>
<div class="pad">
<dl class="pro-sieze-parameter" >
<dt class="dt-img">选择颜色：</dt>
<dd>
<ul class="pro-img-select">
<li data-cid="15-1" color="1" title="梅红" ><a href="javascript:;" >红色</a><i></i></li>
<li data-cid="15-2" color="2" title="粉红" ><a href="javascript:;" >白色</a><i></i></li>
</ul>
</dd>
</dl>
</div>
<div class="prosize02 fleft">
<dl class="pro-sieze-parameter" data-sid="2">
<dt class="dt-size">选择尺码：</dt>
<dd>
<ul class="pro-size-select">
<li data-sid="15" title="S" ><a href="javascript:;" >S</a><i></i></li>
<li data-sid="15" title="M" ><a href="javascript:;" >M</a><i></i></li>
<li data-sid="15" title="L" ><a href="javascript:;" >L</a><i></i></li>
<li data-sid="15" title="XL" ><a href="javascript:;" >XL</a><i></i></li>
</ul>
</dd>
</dl>
<div class="clb"></div>
</div>
</body>
</html>
------解决思路----------------------本帖最后由 showbo 于 2014-12-22 10:53:54 编辑
不要给css增加a:hover样式不就好了，用js来控制，添加mouseenter事件判断数量足才增加一个hover的样式，mouseleave移除这个样式
或者如果数量不足了，变为另外的一个标签，而不是a标签
