javascript - 如何通过多个条件过滤js对象？

标签 javascript jquery json 

<!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..

每次单击条件按钮以检查应禁用哪个按钮时，如何过滤它.. ??

谢谢

最佳答案

将这段代码添加到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>

关于javascript - 如何通过多个条件过滤js对象？，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/41608811/

上一篇：javascript - 如何在 node.js 中重定向时将数据从 express 传递到 .ejs 文件

下一篇：javascript - 在 pubnub 中录制 Vidochat

相关文章：

javascript - IonRangeSlider 禁用以启用使用 Jquery 的 Click 事件

javascript - 如何让jquery无限循环

javascript - 使用 scrollTop 滚动到下一个和上一个 div，我该怎么做？

java - 如何在 Spring Boot 中解析 json 并写入存储库

javascript - 使用 ui.bootstrap 和 AngularJS 进行多重折叠

javascript - 每次触发事件时递增 var 并显示值

javascript - 使用 JQUERY 显示嵌套 JSON

json - 将json结构转换为行

asp.net - 如何在 ASP.net 页面中使用 javascript 获取页面中的所有控件

javascript - 如何将用户重定向到安全域

©2024 IT工具网  联系我们