商城尺码选择效果 jquery

后台管理 选择服装颜色和尺码效果代码

效果如图，选择一个尺码或图片，按第一次时候赋值，按第二次时候取消值，随之效果改变

代码如下：
css文件

1. .noselectdiv   
2. {   
3.     margin-left:12px;   
4.     cursor:pointer;   
5.     text-indent:0;   
6.     float:left;   
7.     height:20px; line-height:20px;   
8.     border:2px solid #666;   
9.     color:Green;   
10.     }   
11. .selectdiv   
12. {   
13.     margin-left:12px;   
14.     cursor:pointer;   
15.     text-indent:0;   
16.     height:20px; line-height:20px;   
17.     float:left;   
18.     border:2px solid red;   
19.     color:Green;   
20.     font-weight:bold;   
21.     color:red;   
22.     }  

.noselectdiv
{
	margin-left:12px;
	cursor:pointer;
	text-indent:0;
	float:left;
	height:20px; line-height:20px;
	border:2px solid #666;
	color:Green;
	}
.selectdiv
{
	margin-left:12px;
	cursor:pointer;
	text-indent:0;
	height:20px; line-height:20px;
	float:left;
	border:2px solid red;
	color:Green;
	font-weight:bold;
	color:red;
	}

js文件

查看代码 复制到剪贴板

1. function checkPcolor(cid) {   
2.        $("#pcolorshowbox" + cid).toggleClass("selectdiv");   
3.        var hiddenColorValueObject = $("#ctl00_cph1_ctrlCheckoutAttributes_hiddenPcolors");   
4.        var colorValues = hiddenColorValueObject.val();   
5.        var colorValuesArray = new Array();   
6.        //如果是第一次填写颜色 会没有任何值   
7.        if (colorValues == "") {   
8.            colorValuesArray.push(cid); //直接把值写入   
9.        }   
10.        else {   
11.            colorValuesArray = colorValues.split(",");   
12.            //此时肯定有一个颜色 列表显示   
13.            var hasSta = true;   
14.            for (i = 0; i < colorValuesArray.length; i++) {   
15.                //如果id已经有了说明要取消！   
16.                if (cid == colorValuesArray[i]) {   
17.                    colorValuesArray.splice(i, 1);   
18.                    hasSta = false;   
19.                    break;   
20.                }   
21.            }   
22.            if (hasSta) {   
23.                colorValuesArray.push(cid);   
24.            }   
25.        }   
26.        var nowColorValues = colorValuesArray.join(",");   
27.        hiddenColorValueObject.val(nowColorValues);   
28.    }  

 function checkPcolor(cid) {
        $("#pcolorshowbox" + cid).toggleClass("selectdiv");
        var hiddenColorValueObject = $("#ctl00_cph1_ctrlCheckoutAttributes_hiddenPcolors");
        var colorValues = hiddenColorValueObject.val();
        var colorValuesArray = new Array();
        //如果是第一次填写颜色 会没有任何值
        if (colorValues == "") {
            colorValuesArray.push(cid); //直接把值写入
        }
        else {
            colorValuesArray = colorValues.split(",");
            //此时肯定有一个颜色 列表显示
            var hasSta = true;
            for (i = 0; i < colorValuesArray.length; i++) {
                //如果id已经有了说明要取消！
                if (cid == colorValuesArray[i]) {
                    colorValuesArray.splice(i, 1);
                    hasSta = false;
                    break;
                }
            }
            if (hasSta) {
                colorValuesArray.push(cid);
            }
        }
        var nowColorValues = colorValuesArray.join(",");
        hiddenColorValueObject.val(nowColorValues);
    }

html代码

1. <DIV id="psizeshowbox<%=size.ProductSizeID %>" class=noselectdiv onclick="checkPsize('<%=size.ProductSizeID %>')"> <%=size.PrductSizeName%> </DIV>  
2.   
3. <ASP:HIDDENFIELD id=hiddenPsizes runat="server" />  
4. <ASP:HIDDENFIELD id=hiddenPcolors runat="server" />  

 <%=size.PrductSizeName%>