模仿淘宝商品选择颜色和尺寸的效果，即选择商品颜色和尺寸的时候，把选择的颜色和尺寸放到一个页面容器里面，不足之处，还望指教。
<!DOCTYPE HTML> <html lang="en-US"> <head> <meta charset="UTF-8"> <title></title> <style type="text/css"> .ibWrapper{font-size:0;letter-spacing:-1px;} .ib{font: 12px/18px arial;display:inline-block;} .selectedcolor span{display:block;width:10px;height:10px;} </style> <script type="text/javascript" src="jquery_v1.7.2.js"></script> <script type="text/javascript"> $(document).ready(function (){//注意修改jquery的路径 var sRGBToHex = function (str){ if (str.search(/rgb/i) === -1){//兼容ie6-8，它们的颜色值本身就是16进制的 return str; } var result = "#"; str = str.replace(/rgba?\((.*)\)/gi,"$1"); aStr = str.split(","); for (var i=0; i<3; i++){//这里直接写了3，是因为标准浏览器的色彩值可能包含透明度信息，例如RGBA(0,255,30,0.5) var iColorAlpha = +aStr[i]; if (iColorAlpha < 16){ result += "0" + iColorAlpha.toString(16); }else{ result += iColorAlpha.toString(16); } } return result; } $("#colorList input").click(function (){ var _this = $(this); if ($(this).is(":checked")){ var oSelectedElement = $("<div class='selectedcolor ib' ></div>"); oSelectedElement.text($(this).parent().text()); $("<span>").appendTo(oSelectedElement).end().css("backgroundColor",function (){ return _this.attr("value"); }); oSelectedElement.appendTo($("#selectedColorList")); }else{ $(".selectedcolor span").each(function (i){ if (sRGBToHex($(this).css("backgroundColor")) === _this.attr("value")){ $(this).parent().remove(); } }) } }) }) </script> </head> <body> <div id="colorList"> <form action="#" method="post"> <label ><input type="checkbox" name="temp_color" id="color1" value="#ff0000"/>红色</label> <label ><input type="checkbox" name="temp_color" id="color2" value="#ffff00"/>黄色</label> <label ><input type="checkbox" name="temp_color" id="color3" value="#00ff00"/>绿色</label> <label ><input type="checkbox" name="temp_color" id="color4" value="#0000ff"/>蓝色</label> </form> </div> <div id="selectedColorList" class="ibWrapper"> </div> </body> </html>
