[test018] 複数配列の総当たり処理

# 複数配列の総当たり処理

## 仕様
- 複数の要素でできた配列を総当たりに組み合わせる

```javascript
var a=[['a1','a2','a3'],['b1','b2'],['c1','c2','c3','c4']];
var b=a[0]||[];//aが空配列の場合はbも空に
for(var i=0;i<a.length-1;i++){
  var tmp=[];
  for(var j=0;j<b.length;j++){
    for(var k=0;k<a[i+1].length;k++){
      tmp.push(b[j]+a[i+1][k]);
    }
  }
  b=tmp;
}
console.log(b);
```
※上記だと3*2*4=24通りのデータが表示される

## 応用
- チェックボックスで選んだ仕様(value)にあせて、classで指定した表示を変更する

### css
```css:test018.css
#result div{display:inline-block;}
.big{font-size:1.5em;}
.reguler{font-size:1em;}
.small{font-size:0.7em;}
.red{color:red;}
.blue{color:blue;}
.yellow{color:yellow;}
.bg_aqua{background-Color:aqua;}
.bg_lime{background-Color:lime;}
```
### javascript
```javascript:test018.js
$(function(){
  $('[type=checkbox]').on('change',function(){
    if($('#size,#color,#bgColor').find('[type=checkbox]:checked').length==0){
      $('#result div').show();
    }else{
      var myList=[];//カテゴリごとの選択されたvalueをクラス名として格納
      ["size","color","bgColor"].forEach(function(x){
        if($('#'+x+' [type=checkbox]:checked').length>0){
          myList.push($('#'+x+' [type=checkbox]:checked').map(function(){return '.'+$(this).val();}).get()); 
        }
      });
      var classList=myList[0]||[];//クラス名の総当たり組み合わせを格納
      for(var i=0;i<myList.length-1;i++){
        if(classList.length==0) classList=myList[i];
        var tmp=[];
        for(var j=0;j<classList.length;j++){
          for(var k=0;k<myList[i+1].length;k++){
            tmp.push(classList[j]+myList[i+1][k]);
          }
        }
        classList=tmp;
      }
      $('#result div').hide().filter(classList.join(",")).show();
      /* クラス名が合致するものだけ表示 */
    }
  }).eq(0).trigger('change');
});

```

### HTML
```HTML
<html>
<head>
<title>複数配列の総当たり処理</title>
<link rel="stylesheet" type="text/css" href="test018.css"></link>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script type="text/javascript" src="test018.js"></script>
</head>
<body>
<h1>複数配列の総当たり処理</h1>
<div id="select" >
<div id="size">size:
<label><input type="checkbox" value="big">大きい</label>
<label><input type="checkbox" value="reguler">普通</label>
<label><input type="checkbox" value="small">小さい</label>
</div>
<div id="color">color:
<label><input type="checkbox" value="red">赤文字</label>
<label><input type="checkbox" value="blue">青文字</label>
<label><input type="checkbox" value="yellow">黄文字</label>
</div>   
<div id="bgColor">bgColor:
<label><input type="checkbox" value="bg_aqua">水色背景</label>
<label><input type="checkbox" value="bg_lime">黄緑背景</label>
</div>           
</div>
<hr>
<div id="result">
<div class="big red bg_aqua">大きい 赤文字 水色背景</div>
<div class="big yellow bg_lime">大きい 黄文字 黄緑背景</div>
<div class="reguler yellow bg_aqua">普通 黄文字 水色背景</div>
<div class="small blue bg_lime">小さい 青文字 黄緑背景</div>
<div class="reguler red bg_aqua">普通 赤文字 水色背景</div>
</div>
</body>
</html>
```

## その他

### sample
- [CodePen](https://codepen.io/yambejp/pen/yKzqgx)

<p data-height="400" data-theme-id="0" data-slug-hash="yKzqgx" data-default-tab="html,result" data-user="yambejp" data-embed-version="2" data-pen-title="test018" class="codepen">See the Pen <a href="https://codepen.io/yambejp/pen/yKzqgx/">test018</a> by yambe jp (<a href="https://codepen.io/yambejp">@yambejp</a>) on <a href="https://codepen.io">CodePen</a>.</p>
<script async src="https://static.codepen.io/assets/embed/ei.js"></script>

### 動作確認
- IE9以上
- Edge40
- Firefox59
- Chrome65