jsオブジェクトを複数の条件でフィルタリングする方法は？

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

jsオブジェクトを複数の条件でフィルタリングする方法は？

あなたが見ることができるように、 '、ユーザーがクリックは、

OK、私は「赤」をクリックした条件に基づいてavliableかされていないTシャツXXLを確認することができますコード'、' 165/80A '、全部のTシャツは受け入れられません 165/80Aのマッチがないので、' Red '、' XXL 'をクリックすると' 165/80A 'ボタンが無効になります。

どのボタンを無効にする必要があるかを確認するために、条件ボタンをクリックするたびに、どのようにフィルタリングできますか？それは

を働いて

おかげ

出典

2017-01-12 Vika Wong

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; 
 
\t \t $('#dvType a').removeClass('disabled'); 
 
\t \t $('#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' 
 
\t \t \t if(color && size) 
 
\t \t \t { 
 
\t \t \t \t $('#dvType a').each(function() { 
 
\t \t \t \t \t var t=$(this).attr('vid'); 
 
\t \t \t \t \t var found=true; 
 
\t \t \t \t \t $('#dvTShirt a').each(function() { 
 
\t \t \t \t \t \t if (this.getAttribute('color') == color && this.getAttribute('size') == size && this.getAttribute('type') == t){found=false;} 
 
\t \t \t \t \t \t 
 
\t \t \t \t \t }); 
 
\t \t \t \t \t if(found) 
 
\t \t \t \t \t { 
 
\t \t \t \t \t \t $(this).addClass('disabled'); 
 
\t \t \t \t \t } 
 
\t \t \t \t \t 
 
\t \t \t \t }); 
 
\t \t \t } 
 
     
 
\t \t }); 
 
\t }

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>

でこれを追加する機能に最初の行でこれを追加します

出典

2017-01-12 10:05:08

ありがとうございました。 –

大歓迎です。私はそれが助けてうれしいです。 –

jsオブジェクトを複数の条件でフィルタリングする方法は？

答えて

関連する問題