JSFiddle - React, Tailwind, and code Playground

by tianshaojie

HTML

<div>
属性1：
<input type="button" class="sku" attr_id="10" value="10"/>
</div>

<div>
属性2：
<input type="button" class="sku" attr_id="20" value="20"/>
<input type="button" class="sku" attr_id="21" value="21"/>
<input type="button" class="sku" attr_id="22" value="22"/>
<input type="button" class="sku" attr_id="23" value="23"/>
<input type="button" class="sku" attr_id="24" value="24"/>
</div>

<div>
属性3：
<input type="button" class="sku" attr_id="30" value="30"/>
<input type="button" class="sku" attr_id="31" value="31"/>
<input type="button" class="sku" attr_id="32" value="32"/>
<input type="button" class="sku" attr_id="33" value="33"/>
<input type="button" class="sku" attr_id="34" value="34"/>
<input type="button" class="sku" attr_id="35" value="35"/>
<input type="button" class="sku" attr_id="36" value="36"/>
<input type="button" class="sku" attr_id="37" value="37"/>
<input type="button" class="sku" attr_id="38" value="38"/>
</div>

<div>
属性4：
<input type="button" class="sku" attr_id="40" value="40"/>
</div>

<span id="init_time">init sku time: </span> </br>
<span id="price">--</span> </br>

CSS

.bh-sku-selected {color: red;}

JavaScript

var startTime = new Date().getTime();
//属性集
var keys = [
        ['10'],
        ['20','21','22','23','24'],
        ['30','31','32','33','34','35','36','37','38'],
        ['40']
        ];
         
//后台读取结果集
var data = {
    "10;24;31;40": {
        price:366,
        count:46
    },
    "10;24;32;40": {
        price:406,
        count:66
    },
    "10;24;33;40": {
        price:416,
        count:77
    },
    "10;24;34;40": {
        price:456,
        count:9
    },
    "10;24;35;40": {
        price:371,
        count:33
    },
    "10;24;36;40": {
        price:411,
        count:79
    },
    "10;24;37;40": {
        price:421,
        count:87
    },
    "10;24;38;40": {
        price:461,
        count:9
    },
    "10;24;30;40": {
        price:356,
        count:59
    },
    "10;23;31;40": {
        price:366,
        count:50
    },
    "10;23;32;40": {
        price:406,
        count:9
    },
    "10;23;33;40": {
        price:416,
        count:90
    },
    "10;23;34;40": {
        price:456,
        count:10
    },
    "10;23;35;40": {
        price:371,
        count:79
    },
    "10;23;36;40": {
        price:411,
        count:90
    },
    "10;23;37;40": {
        price:421,
        count:10
    },
    "10;23;38;40": {
        price:461,
        count:9
    },
    "10;23;30;40": {
        price:356,
        count:46
    },
    "10;22;31;40": {
        price:356,
        count:27
    },
    "10;22;32;40": {
        price:396,
        count:38
    },
    "10;22;33;40": {
        price:406,
        count:42
    },
    "10;22;34;40": {
        price:446,
        count:50
    },
    "10;22;35;40": {
        price:361,
        count:25
    },
    "10;22;36;40": {
        price:401,
        count:40
    },
    "10;22;37;40": {
        price:411,
        count:43
    },
    "10;22;38;40": {
        price:451,
        count:42
    },
    "10;21;31;40": {
        price:366,
        count:79
    },
    "10;21;32;40": {
        price:406,
       ...