<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title></title>
<meta charset="utf-8" />
</head>
<body>
<script>
var d = {
"SkuProduct": [
{
"ProductId": 2547,
"ProductName": "T-shirt",
"SalePrice": 0.03,
"SkuProps": [
{
"PropValueId": 30,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2553,
"ProductName": "T-shirt",
"SalePrice": 0.05,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2559,
"ProductName": "T-shirt",
"SalePrice": 0.07,
"SkuProps": [
{
"PropValueId": 30,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2563,
"ProductName": "T-shirt",
"SalePrice": 0.08,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 23,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2565,
"ProductName": "T-shirt",
"SalePrice": 0.09,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
}
],
"SellProps": [
{
"PropCode": "color_cn",
"PropName": "Color",
"Props": [
{
"Id": 16,
"PName": "Red"
}
]
},
{
"PropCode": "size_cn",
"PropName": "Size",
"Props": [
{
"Id": 20,
"PName": "M"
},
{
"Id": 23,
"PName": "XXL"
}
]
},
{
"PropCode": "body_type_cn",
"PropName": "Type",
"Props": [
{
"Id": 30,
"PName": "165/80A"
},
{
"Id": 31,
"PName": "170/84A"
}
]
}
]
}
</script>
T-shirt
<div id="dvTShirt"></div>
Color
<div id="dvColor"></div>
Size
<div id="dvSize"></div>
Type
<div id="dvType"></div>
<style>
a {
display: inline-block;
padding: 5px;
background: #eee;
margin-right: 10px;
cursor: pointer;
}
a.selected {
background: green;
color: #fff;
}
a.disabled {
background: #666;
color: #fff;
}
</style>
<script src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.4.2.min.js"></script>
<script>
$('#dvTShirt').append($(d.SkuProduct).map(function (i, v) { return '<a type="' + v.SkuProps[0].PropValueId + '" color="' + v.SkuProps[1].PropValueId + '" size="' + v.SkuProps[2].PropValueId + '" price="' + v.SalePrice + '">T' + v.ProductId + '</a>' }).get().join(''));
$('#dvColor').append($(d.SellProps[0].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
$('#dvSize').append($(d.SellProps[1].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
$('#dvType').append($(d.SellProps[2].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
function filter() {
$(this).toggleClass('selected').siblings().removeClass('selected');
var color = $('#dvColor a.selected').attr('vid'), size = $('#dvSize a.selected').attr('vid'), type = $('#dvType a.selected').attr('vid'), hit;
$('#dvTShirt a').each(function () {
hit = true;
if (color) hit = this.getAttribute('color') == color;
if (hit && size) hit = this.getAttribute('size') == size;
if (hit && type) hit = this.getAttribute('type') == type;
this.className = hit ? '' : 'disabled'
});
}
</script>
正如您所看到的，代码可以根据用户点击的条件检查哪些T恤可以使用，
好的，当我点击'红色'，'XXL'，'165 / 80A'时，所有的T恤都是不可靠的， 我点击“红色”，“XXL”时禁用“165 / 80A”按钮，因为165 / 80A无法匹配..
每次单击条件按钮以检查应禁用哪个按钮时，我该怎样过滤它？??
谢谢
答案 0 :(得分：1)
在Filter功能中添加此代码然后它正在运行
在函数的第一行添加它
if ($(this).hasClass('disabled')) return;
在此循环$('#dvTShirt a').each(function () {
if(color && size)
{
$('#dvType a').each(function () {
var t=$(this).attr('vid');
var found=true;
$('#dvTShirt a').each(function () {
if (this.getAttribute('color') == color && this.getAttribute('size') == size && this.getAttribute('type') == t){found=false;}
});
if(found)
{
$(this).addClass('disabled');
}
});
}
var d = {
"SkuProduct": [
{
"ProductId": 2547,
"ProductName": "T-shirt",
"SalePrice": 0.03,
"SkuProps": [
{
"PropValueId": 30,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2553,
"ProductName": "T-shirt",
"SalePrice": 0.05,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2559,
"ProductName": "T-shirt",
"SalePrice": 0.07,
"SkuProps": [
{
"PropValueId": 30,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2563,
"ProductName": "T-shirt",
"SalePrice": 0.08,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 23,
"PropCode": "size_cn"
}
]
},
{
"ProductId": 2565,
"ProductName": "T-shirt",
"SalePrice": 0.09,
"SkuProps": [
{
"PropValueId": 31,
"PropCode": "body_type_cn"
},
{
"PropValueId": 16,
"PropCode": "color_cn"
},
{
"PropValueId": 20,
"PropCode": "size_cn"
}
]
}
],
"SellProps": [
{
"PropCode": "color_cn",
"PropName": "Color",
"Props": [
{
"Id": 16,
"PName": "Red"
}
]
},
{
"PropCode": "size_cn",
"PropName": "Size",
"Props": [
{
"Id": 20,
"PName": "M"
},
{
"Id": 23,
"PName": "XXL"
}
]
},
{
"PropCode": "body_type_cn",
"PropName": "Type",
"Props": [
{
"Id": 30,
"PName": "165/80A"
},
{
"Id": 31,
"PName": "170/84A"
}
]
}
]
}
$('#dvTShirt').append($(d.SkuProduct).map(function (i, v) { return '<a type="' + v.SkuProps[0].PropValueId + '" color="' + v.SkuProps[1].PropValueId + '" size="' + v.SkuProps[2].PropValueId + '" price="' + v.SalePrice + '">T' + v.ProductId + '</a>' }).get().join(''));
$('#dvColor').append($(d.SellProps[0].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
$('#dvSize').append($(d.SellProps[1].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
$('#dvType').append($(d.SellProps[2].Props).map(function (i, v) { return '<a vid="' + v.Id + '">' + v.PName + '</a>' }).get().join('')).find('a').click(filter);
function filter() {
if ($(this).hasClass('disabled')) return; $(this).toggleClass('selected').siblings().removeClass('selected');
var color = $('#dvColor a.selected').attr('vid'), size = $('#dvSize a.selected').attr('vid'), type = $('#dvType a.selected').attr('vid'), hit;
$('#dvType a').removeClass('disabled');
$('#dvTShirt a').each(function () {
hit = true;
if (color) hit = this.getAttribute('color') == color;
if (hit && size) hit = this.getAttribute('size') == size;
if (hit && type) hit = this.getAttribute('type') == type;
this.className = hit ? '' : 'disabled'
if(color && size)
{
$('#dvType a').each(function () {
var t=$(this).attr('vid');
var found=true;
$('#dvTShirt a').each(function () {
if (this.getAttribute('color') == color && this.getAttribute('size') == size && this.getAttribute('type') == t){found=false;}
});
if(found)
{
$(this).addClass('disabled');
}
});
}
});
}a {
display: inline-block;
padding: 5px;
background: #eee;
margin-right: 10px;
cursor: pointer;
}
a.selected {
background: green;
color: #fff;
}
a.disabled {
background: #666;
color: #fff;
}<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
T-shirt
<div id="dvTShirt"></div>
Color
<div id="dvColor"></div>
Size
<div id="dvSize"></div>
Type
<div id="dvType"></div>