<!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>
Wie js Objekt durch mehrere Bedingungen filtern?
Wie Sie den Code sehen, können überprüfen, welche T-Shirts avliable ist oder nicht, basierend auf dem Zustand, wenn der Benutzer klickt,
OK, Wenn ich auf 'Red', 'XXL ',' 165/80A ', Alle T-Shirts sind unaliable, Ich möchte die Taste' 165/80A 'deaktivieren, wenn ich auf' Rot ',' XXL 'klicke, weil es keine Übereinstimmung für 165/80A ..
gibtWie kann ich das jedes Mal filtern, wenn ich auf eine Bedingungsschaltfläche klicke, um zu prüfen, welche Schaltfläche deaktiviert werden sollte?
Dank
Danke Mann, Sie haben gerade meinen Tag gerettet !! –
Sie sind herzlich willkommen. Ich bin froh, dass es geholfen hat. –