我希望点击颜色或者尺寸属性,根据json里面的可用属性,在颜色和尺寸里加上不同的状态。
JSON是颜色和尺寸点击对应存在的SKU数据。
要求的效果如图
点击任意颜色或者尺寸,根据json的数组对象查询哪些其他属性可点击,哪些属性不可点nostock.
默认页面加载的时候第一个选中的属性也要执行此次循环查询。
这个是整个页面代码【可直接复制测试】:
[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]
与恶龙缠斗过久,自身亦成为恶龙;凝视深渊过久,深渊将回以凝视…