var goodsList = [
{
cg_id: "228614",
dg_id: "151509",
goods_spec: { 单双灶: "单灶", 颜色: "黑", 规格: "1" },
image: "http://res.gezlife.com/resource/Imgs/uploads/images/2019/06/12/5d00ce4ae53b9.jpg",
is_on_sale: "1",
price: "20.00",
},
{
cg_id: "228614",
dg_id: "151509",
goods_spec: { 单双灶: "单灶", 颜色: "黑", 规格: "2" },
image: "http://res.gezlife.com/resource/Imgs/uploads/images/2019/06/12/5d00ce4ae53b9.jpg",
is_on_sale: "1",
price: "20.00",
}
,{
cg_id: "228614",
dg_id: "151509",
goods_spec: { 单双灶: "单灶", 颜色: "大理石色", 规格: "1" },
image: "http://res.gezlife.com/resource/Imgs/uploads/images/2019/06/12/5d00ce4ae53b9.jpg",
is_on_sale: "1",
price: "20.00",
},{
cg_id: "228615",
dg_id: "151510",
goods_spec: { 单双灶: "双灶", 颜色: "大理石色", 规格: "1" },
image: "http://res.gezlife.com/resource/Imgs/uploads/images/2019/06/12/5d00ce5410c0c.jpg",
is_on_sale: "1",
price: "30.00",
}, {
cg_id: "228615",
dg_id: "151510",
goods_spec: { 单双灶: "双灶", 颜色: "大理石色", 规格: "2" },
image: "http://res.gezlife.com/resource/Imgs/uploads/images/2019/06/12/5d00ce5410c0c.jpg",
is_on_sale: "1",
price: "30.00",
}
];
function jsonDot($doms) {
return $doms.map(function () {
return $(this).find('.goodsKey').text()
}).get();
}
var selArr = {} // 用来存放选择的数组，长度最大=3，长度=3时与json进行对比
function goodsSpec(obj) {
// console.log($(obj).hasClass('unlight'))
// 选中添加高亮
if($(obj).hasClass('curr')){
$(obj).removeClass('curr');
} else {
// if ($(obj).hasClass('unlight')) {
// // alert('无货')
// }else{
// $(obj).addClass('curr').siblings('span').removeClass('curr');
// }
$(obj).addClass('curr').siblings().removeClass('curr')
}
// if ($(obj).hasClass('unlight')) {
// // alert('无货')
// return false;
// }
if($('.commodity_spec_item').find('.area-list span.curr').length==3){
}else{
$('.commodity_spec_item').find('.area-list span').addClass('unlight').removeClass('light')
}
// if ($(obj).hasClass('unlight')) {
// // alert('无货');
// return false;
// } else {
// // console.log(123)
// }
// $(obj).removeClass('unlight').addClass('light').siblings().removeClass('light').addClass('unlight');
let $panel1 = $(obj).closest('.commodity_spec_item'); // 取得当前点击项的父级备用
$panel1.siblings().find('.area-list span').removeClass('light'); //默认把非当前点击的元素置灰
let goodsKey = $panel1.find('.goodsKey').text(); // titile(单双灶)
let selectSpanVal = $(obj).text(); // 点击的项(单灶选项 双灶选项)
if(selArr.hasOwnProperty(goodsKey)){
delete selArr[goodsKey]
}else{
selArr[goodsKey] = selectSpanVal
}
console.log('selArr:' + JSON.stringify(selArr))
var selArrLength = Object.keys(selArr).length;
// console.log('selArrLength:'+selArrLength)
goodsList.forEach(element => {
// console.log(element.goods_spec)'
var goodsSpecVal = JSON.stringify(element.goods_spec);
var goodSpecObj = element.goods_spec;
// goodsSpecVal.forEach( ele => {
// // let newSibKey = ele;
// console.log(ele)
// })
var isOnSale = element.is_on_sale; //货品状态
if (isOnSale == 1) {
if (isOnSale == 1 && goodsSpecVal.indexOf(selectSpanVal) != -1) {
// console.log('isOnSale:'+isOnSale);
// $(obj).removeClass('unlight').addClass('light')
// 循环json里当前的商品goods_spec，让页面上与循环到的每一项都可点击，所以要循环页面上的每一项（单双灶，颜色，规格里的每一项）
// Object.keys(goodSpecObj).forEach(function(key){
// // console.log('goodSpecObj[key]:'+goodSpecObj[key]); // json数据里goods_spec 属性的每一项 goods_spec: {单双灶: "单灶", 颜色: "黑", 规格: "1"}
// // 循环页面上的每一项（单双灶，颜色，规格里的每一项）
// $('.commodity_spec_item').find('.area-list span').each(function () {
// var $item = $(this);
// // console.log($item.text())
// // 把当前span里的值与上层循环的每一项对比，如果有一样的，就添加light
// if (goodSpecObj[key] == $item.text()) {
// // console.log(selectSpanVal)
// $item.removeClass('unlight').addClass('light')
// }
// })
// })
}
// console.log('goods_spec:'+JSON.stringify(element.goods_spec))
// console.log('selArr:'+JSON.stringify(selArr))
// 如果json数据里的goods_spec包含当前selArr数组转成字符串之后的字符串，就让"is_on_sale=1" && 让相应页面上包含selArr这个字符串内容的数组里的第三个选项的内容，如："规格里1"这一项添加light
// console.log(JSON.stringify(element.goods_spec).indexOf(JSON.stringify(selArr)))
// if(JSON.stringify(element.goods_spec).indexOf(JSON.stringify(selArr)) != -1){
// console.log(123)
// }
var trueCount = 0;//true格式
for (var p in element.goods_spec) { //遍历接口返回单个属性列表
// selArr 中是否存在 goods_spec中的属性
if (selArr.hasOwnProperty(p)) {
//如果存在 同key的元素的value对比
if (selArr[p] == element.goods_spec[p]) {
console.log(selArr[p] +'======================'+element.goods_spec[p]);
// 这里代表包含
trueCount ++; //正确后计数
} else {
// console.log(123)
}
}
// console.log('.........'+trueCount)
// console.log('-------------'+Object.getOwnPropertyNames(selArr).length)
}
console.log(trueCount);
if (trueCount == Object.getOwnPropertyNames(selArr).length && isOnSale == 1) {
$('.commodity_spec_item').find('.area-list span').each(function () {
var $item = $(this);
for (var p in element.goods_spec) {
// 把当前span里的值与上层循环的每一项对比，如果有一样的，就添加light
if (element.goods_spec[p] == $item.text()) {
// console.log(element.goods_spec[p]);
$item.removeClass('unlight').addClass('light')
}
}
})
}
if (trueCount==2 && Object.getOwnPropertyNames(selArr).length==2 && isOnSale == 1) {
console.log('99999999999999999999999999')
console.log(element.goods_spec)
$('.commodity_spec_item').find('.area-list span').each(function () {
var $item = $(this);
for (var p in element.goods_spec) {
// 把当前span里的值与上层循环的每一项对比，如果有一样的，就添加light
if (element.goods_spec[p] == $item.text()) {
// console.log(element.goods_spec[p]);
$item.removeClass('unlight').addClass('light')
}
}
})
}
if (trueCount==1 && Object.getOwnPropertyNames(selArr).length==1 && isOnSale == 1) {
$('.commodity_spec_item').find('.area-list span').each(function () {
var $item = $(this);
for (var p in element.goods_spec) {
// 把当前span里的值与上层循环的每一项对比，如果有一样的，就添加light
if (element.goods_spec[p] == $item.text()) {
// console.log(element.goods_spec[p]);
// $('#item_1 .curr.light').click()
$item.removeClass('unlight').addClass('light')
}
}
})
}
// console.log('true:'+trueCount + '/////'+Object.getOwnPropertyNames(selArr).length);
// if(trueCount == Object.getOwnPropertyNames(selArr).length){
// // 整理代表 选中属性 包含在 element.goods_spec 中了
// // console.log('测试结果')
// console.log(element.goods_spec);
// }
// if(JSON.stringify(element.goods_spec) == JSON.stringify(selArr)){
// if(isOnSale == 1){
// console.log(123)
// $(obj).removeClass('unlight').addClass('light'); // 为符合条件的元素添加高亮
// }
// }
}
})
// goodsList.forEach( element => { // 循环取到的json
// if(element.goods_spec[goodsKey] == selectSpanVal){ // 当前循环到的项 等于 点击的项(单灶选项 双灶选项)
// var tempSibling = $panel1.siblings(); // 当前panel的同级
// var siblingsEle = jsonDot(tempSibling); // 同级元素的title：颜色,尺寸
// siblingsEle.forEach( ele => { // 循环同级元素 title
// let newSibKey = ele; // 同级元素 title 数组(元素的title：颜色,尺寸)
// let newKey = element.goods_spec[newSibKey]; // 匹配
// tempSibling.each(function () { // 循环panel的同级(目的拿到每个子项(子项有多个))
// $(this).find('.area-list span').each(function () { // 循环每个子项
// var selectAbout = element.goods_spec;
// if($(this).text() == newKey){ // 当前循环到的项 等于 匹配到的值
// $(this).addClass('light').removeClass('unlight'); // 为符合条件的元素添加高亮
// // $('#item_1 .curr').click().addClass('curr')
// // $('#item_2 .curr').click().addClass('curr')
// // $('#item_2 .curr').click().addClass('curr')
// }
// })
// })
// })
// }
// });
// var tempObj ={};
// $('.commodity_spec_list').find('.area-list span').each(function () {
// var $item = $(this);
// if ($item.hasClass('curr') && !$item.hasClass('unlight') ) {
// // 拿到选中选项
// var tempKey = $item.closest('.commodity_spec_item').find('.goodsKey').text();
// tempObj[tempKey]=$item.text()
// }
// })
// // console.log(JSON.stringify(tempObj))
// goodsList.forEach( element => {
// // console.log(JSON.stringify(element.goods_spec))
// if (JSON.stringify(tempObj) == JSON.stringify(element.goods_spec)) {
// // console.log('..................................')
// // console.log(element.image)
// // console.log(element.price)
// // console.log('dg_id:'+element.dg_id)
// $('.commodity_spec img').attr('src',element.image);
// $('.commodity_spec-money p span').text(element.price)
// }
// })
}
<div class="commodity_spec_list">
<div class="commodity_spec_item" id="item_1">
<span class="goodsKey">单双灶</span>
<div class="area-list">
<span onclick="goodsSpec(this)">单灶</span>
<span onclick="goodsSpec(this)">双灶</span> </div>
</div><div class="commodity_spec_item" id="item_2">
<span class="goodsKey">颜色</span>
<div class="area-list">
<span onclick="goodsSpec(this)">黑</span> <!-- <span data-id="222">规格值2</span>
<span data-id="333">规格值3</span>
<span data-id="444" class="curr">规格值4</span>--><span class="" onclick="goodsSpec(this)">大理石色</span> <!-- <span data-id="222">规格值2</span>
<span data-id="333">规格值3</span>
<span data-id="444" class="curr">规格值4</span>--> </div>
</div><div class="commodity_spec_item" id="item_3">
<span class="goodsKey">规格</span>
<div class="area-list">
<span onclick="goodsSpec(this)">1</span> <!-- <span data-id="222">规格值2</span>
<span data-id="333">规格值3</span>
<span data-id="444" class="curr">规格值4</span>--> <span onclick="goodsSpec(this)">2</span> <!-- <span data-id="222">规格值2</span>
<span data-id="333">规格值3</span>
<span data-id="444" class="curr">规格值4</span>--> </div>
</div> </div>
i{font-style: normal;}
/*******选择规格*********/
.spec-bg{
display: none;
position: fixed;
top: 0;
left: 0;
width: 100%;
height: 100%;
background:rgba(0,0,0,.4);
z-index: 25;
}
.spec-info {
display: none;
position: fixed;
bottom: 0;
width: 100%;
font-size: .24rem;
color: #666;
background-color: #fff;
z-index: 30;
}
.commodity_spec{
margin: 0.34rem;
}
.commodity_spec-frame{
position: relative;
display: flex;
margin-bottom: 0.5rem;
}
.commodity_spec-frame figure img{
height: 2rem;
width: 2rem;
}
.commodity_spec-money{
width: 100%;
height:2rem;
margin-left: 0.2rem;
}
.commodity_spec-money p{
margin-left: 0;
margin-top: 1.6rem;
width: 100%;
height:0.4rem;
font-size:0.24rem;
line-height:0.4rem;
color: #f43531;
font-weight: bold;
}
.commodity_spec-money p span {
font-size: .42rem;
}
.commodity_spec-frame .close-btn{
position: absolute;
top: -.1rem;
right: 0;
color: #999;
}
.commodity_spec-frame .close-btn .iconfont{
font-size: .4rem;
}
.commodity_spec_list{
max-height: 100rem;
overflow-y: scroll;
}
.commodity_spec_item p{
margin-left: 0;
width: 100%;
height: 0.4rem;
font-size: 0.24rem;
line-height: 0.4rem;
color: #666666;
letter-spacing:0.02rem;
}
.area-list {
margin-left: 0;
margin-top: 0;
padding: 0.2rem 0 0 0;
font-size: 0.26rem;
}
.area-list span {
display: inline-block;
padding-left: .3rem;
padding-right: .3rem;
margin-right: .2rem;
margin-bottom: .3rem;
background-color: #f6f6f6;
height: .5rem;
line-height: .45rem;
border: 1px solid #f6f6f6;
-webkit-border-radius: .5rem;
border-radius: .5rem;
color: #333;
}
.classify-con-lower{
display: flex;
text-align: center;
height: 1rem;
line-height: 1rem;
font-size: .42rem;
}
.classify-con-lower a.btn-determine{
flex: 1;
background: -webkit-linear-gradient(left, #ef5833 , #ff8a45); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right, #ef5833 , #ff8a45); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right, #ef5833 , #ff8a45); /* Firefox 3.6 - 15 */
background: linear-gradient(right, #ef5833 , #ff8a45); /* 标准的语法（必须放在最后） */
color: #fff;
}
.recommend{
margin-bottom: 1rem;
}
.recommend .recommend_tit{
position: relative;
height: .9rem;
line-height: .9rem;
text-align: center;
font-size: .3rem;
}
.recommend .recommend_tit span{
position: relative;
display: inline-block;
width: 1.75rem;
color: #333;
}
.recommend .recommend_tit span.curr{
color: #f43531;
font-weight: 700;
}
.recommend .recommend_tit:before,.recommend .recommend_tit:after{
position: absolute;
content: ' ';
top:.45rem;
width: .88rem;
height: 1px;
background-color: #dcdcdc;
}
.recommend .recommend_tit:before{
left:50%;
margin-left: 1.75rem;
}
.recommend .recommend_tit:after{
right:50%;
margin-right: 1.75rem;
}
.recommend .recommend_tit span:nth-child(1):before,.recommend .recommend_tit span:nth-child(2):after{
position: absolute;
content: ' ';
top:.4rem;
width: .1rem;
height: .1rem;
border-radius: .1rem;
background-color: #dcdcdc;
}
.recommend .recommend_tit span:nth-child(1):before{
left: -.1rem;
}
.recommend .recommend_tit span:nth-child(2):after{
right: -.1rem;
}
/*推荐*/
.recommend-list{
border-radius: .1rem;
background-color: #fff;
padding-top: .2rem;
margin-left: .2rem;
margin-right: .2rem;
}
.recommend-list .goods-info{
display: block;
float: left;
width: 33%;
}
.recommend-list .goods-info>div{
width: 2rem;
margin: auto;
}
.recommend-list .goods-info .pic{
height: 2rem;
border-radius: .1rem;
overflow: hidden;
}
.recommend-list .goods-info .pic img{
width: 100%;
height: 100%;
}
.recommend-list .goods-info .info{
padding-top: .2rem;
padding-bottom: .25rem;
color: #666;
}
.recommend-list .goods-info .info .tit{
color: #333;
overflow: hidden;
white-space: nowrap;
text-overflow: ellipsis;
}
.recommend-list .goods-info .price{
height: .4rem;
line-height: .4rem;
color: #999;
}
.recommend-list .goods-info .price strong{
color: #f43531;
font-size: .28rem;
}
/*footer*/
footer{
display: flex;
height: 1rem;
background: #fff;
position: fixed;
left: 0;
right: 0;
bottom:0;
font-size: .3rem;
border-top:1px solid #ccc;
z-index:25;
}
footer .w-15{
width: 15%;
text-align: center;
color: #666;
}
footer .w-25{
width: 25%;
text-align: center;
color: #666;
}
footer .w-15 p,footer .w-25 p{
font-size: .24rem;
margin-top: -.2rem;
}
footer .w-15 a,footer .w-25 a{
color: #666;
}
footer .w-15 .iconfont,footer .w-25 .iconfont{font-size: .5rem;}
footer .receive-btn{
flex: 1;
background: -webkit-linear-gradient(left,#f53631,#ff8945); /* Safari 5.1 - 6.0 */
background: -o-linear-gradient(right,#f53631,#ff8945); /* Opera 11.1 - 12.0 */
background: -moz-linear-gradient(right,#f53631,#ff8945); /* Firefox 3.6 - 15 */
background: linear-gradient(right,#f53631,#ff8945); /* 标准的语法（必须放在最后） */
color:#fff;
text-align: center;
padding: .15rem;
font-size: .36rem;
line-height: 1;
}
footer .receive-btn .price{
font-size: .24rem;
}
footer .goods-car{position: relative;}
footer .goods-car span{
position: absolute;
top: .05rem;
right: .2rem;
font-size: 0.24rem;
color: #fff;
height: 0.36rem;
background-color: #f33634;
border-radius: 0.18rem;
line-height: .36rem;
padding-left: .05rem;
padding-right: .05rem;
}
/*******咨询导购***********/
/*im 未读消息数*/
.go-guide{
position: relative;
}
.go-guide #num_total{
display: inline-block;
position: absolute;
top: 0;
right: 0;
font-size: 0.24rem;
color: #fff;
min-width: 0.36rem;
height: 0.36rem;
text-align: center;
background-color: #f33634;
border-radius: 0.18rem;
padding: 0.05rem 0.1rem;
line-height: 0.26rem;
}
/* 加入购物车动效 */
.add-car-tips {
animation-duration: 500ms;
animation-delay: 100ms;
text-align: center;
position: fixed;
top: 0;
bottom: 0;
margin: auto;
width: 2.5rem;
left: -50px;
right: 0;
height: .72rem;
line-height: .7rem;
color: #fff;
font-size: .24rem;
border-radius: 5px;
border: 1px solid rgba(0,0,0,0.8);
background-color: rgba(0,0,0,0.8);
display: none;
z-index: 26;
letter-spacing: 1px;
}
.area-list span.disabled{
color:#999;
border: 1px dashed #999;
background-color: #fff;
pointer-events: none;
}
.area-list span.curr {
background-color: #ffe7ea;
color: #f43531;
border: 1px solid #f43531;
}
.area-list .light{
color: #333;
}
.area-list .unlight{
color: #ddd !important;
border: none !important;
background-color: #f6f6f6 !important;
}