商品详情页属性筛选状态

Question

1. 我希望点击颜色或者尺寸属性，根据json里面的可用属性，在颜色和尺寸里加上不同的状态。

2. JSON是颜色和尺寸点击对应存在的SKU数据。

3. 要求的效果如图

4. 点击任意颜色或者尺寸，根据json的数组对象查询哪些其他属性可点击，哪些属性不可点nostock.

5. 默认页面加载的时候第一个选中的属性也要执行此次循环查询。
   

这个是整个页面代码【可直接复制测试】：
[code]

<style>

ul,li{list-style:none;}
.list{clear:both;}
 h5{display:block;clear:both;}
.list li{border:#ccc 1px solid;padding:5px 20px;float:left;margin-right:5px;}
.list li.checked{border:red 1px solid;color:red;}
.list li.nostock{border:#ccc 1px solid;color:#ccc;}

</style>
<h5>Color：</h5>
<ul class="list" data-value="9588">

<li data-value="9588:2264868" class="item checked">red</li>
<li data-value="9588:2264867" class="item">yellow</li>
<li data-value="9588:198407" class="item nostock">blue</li>

</ul>
<h5>Size：</h5>
<ul class="list" data-value="9589">

<li data-value="9589:2264864" class="item">12</li>
<li data-value="9589:2264864" class="item">13</li>
<li data-value="9589:2264864" class="item">14</li>

</ul>
<script src='https://cdn.bootcss.com/jquer...'></script>
<script>

var json = {
skuList:[{"attributes":"9588:198407^9589:2264864"},{"attributes":"9588:2264867^9589:2264863"},{"attributes":"9588:198407^9589:2264863"},{"attributes":"9588:2264868"},{"attributes":"9589:2264864"}]
};
var len = json.skuList.length; 
for(var i = 0;i<len;i++){
    console.log(json.skuList[i]);
}

$('.list li').on('click',function(){
        $(this).addClass('checked').siblings().removeClass('checked');    
});

</script>
[/code]

Answer 1

等待大神答复