电商系统常用的产品颜色，尺码选择JS程序实现

一、说业务

 

这两天，一直在处理，日常电商系统的一个功能。

 

即，产品规格选择的。主要包括颜色，尺码。

 

我们主要是做服装。

 

因此，当客人打开我们的某个产品页面。

 

有购物车，及 立即购物的选择，点击时，即显示这个规格窗口。

 

供用户选择：

 

颜色：白，黑

 

尺码： S ,M,L XL

二、说功能细节。

今天我们要说的，就是这个功能 ：

 

首先：我们的产品页面是通过后台生成。

 

因此，生成的产品页面如8193238.html的页面：

 

显示的页面效果如下：

 

其中有两样东西：

1.页面显示的规格窗口，以下是HTML代码

 

 

2.在售产品的颜色与尺码（Json对象）

 

现在来场景举例：

 

首先，小A打开产品页面。

 

系统显示产品详情页中，所有的颜色和尺码（这个颜色和尺码是当初建立这个产品时，建立的颜色，尺码，即使后面

 

断码，也全部都会显示出来）

 

不过，这里有个初始化工作，即：

 

我们需要通过一个 

 

for语句，把所有颜色，找出来，并且和当前可售的尺码匹配，如果当前可售的，没有，就显示灰，并不可点击

 

第三、说说代码

代码如下：

 

var theColor = $(":radio[name=colorStandard][checked]").val()

    var theSize = $(":radio[name=sizeStandard][checked]").val()

    if (theColor == undefined || theColor == "")

        theColor = null;

    if (theSize == undefined || theSize == "")

        theSize = null;

 

    var contrlData = getColorSizeItemControls(theColor, theSize);

 

    for (i = 0; i < $("input[name='colorStandard']").length; i++) {

 

 

        if (contrlData.Colors.indexOf($("input[name='colorStandard']")[i].value) <= -1) {

            //$("input[name='colorStandard']")[i].nextSibling.style.display = "none";

 

            $("input[name='colorStandard']")[i].nextSibling.style = "pointer-events: none;"

            $("input[name='colorStandard']")[i].nextSibling.style.opacity = "0.2";

 

        } else {