Используйте флажки для фильтрации элементов с JSON

Question

Я пытаюсь выяснить, как фильтровать элементы на основе данных JSON и сопоставить их с атрибутом elements.

Не уверен, как это сделать с несколькими параметрами - с одним я бы сделал что-то вроде этого, чтобы соответствовать им:

$('li.grid-item').filter(function (i, e) {
    return productList.indexOf($(this).attr('data-partnumber')) > -1
}).show();

Каков наилучший способ сделать это?

Codepen:

HTML:

<div>
  <input id="box1" type="checkbox" />
  <label for="box1">Group 1</label>
  <br>
  <input id="box2" type="checkbox" />
  <label for="box2">Group 2</label>
    <br>
  <input id="box3" type="checkbox" />
  <label for="box3">Group 3</label>
</div>


<ul class="grid">
<li class="grid-item" style="display:none">1<span data-partnumber="MIG455239" style=""></span></li>
<li class="grid-item" style="display:none">2<span data-partnumber="MIG455239" style=""></span></li>
<li class="grid-item" style="display:none">3<span data-partnumber="MIG455239" style=""></span></li>
</ul>

JS

var productList= [ 
   { 
      mig:"MIG1812067",
      group:"one",
   },
   { 
      mig:"MIG1812076",
       group:"two",
   },
   { 
      mig:"MIG1812136",
   group:"three","
   }

];

Answer 1

Вы можете использовать приведенный ниже код, чтобы показать / скрыть соответствующие группы

1. исправить свой массив json, так как каждый json внутри массива имеет дополнительную запятую, удалите ее.
2. поместите значение группы на каждый соответствующий флажок
3. при нажатии на флажок, итерируйте все отмеченные флажки, чтобы получить значение и найдите соответствующий элемент li
4. покажите соответствующий элемент li для отмеченных флажков

var productList= [ 
   { 
      mig:"MIG1812067",
      group:"one"
   },
   { 
      mig:"MIG1812076",
       group:"two"
   },
   { 
      mig:"MIG1812136",
   group:"three"
   }

];

$(function(){
   $('input[type=checkbox]').on('click', function(){
       var $checkboxes = $('input[type=checkbox]:checked');
       $('ul.grid li.grid-item').hide();
       $checkboxes.each(function(){
          var val = $(this).val();
          $.each(productList, function(index, value){
             if(value.group == val) {
               $('ul.grid li.grid-item').filter(function(){
               return $(this).find('span[data-partnumber="' + value.mig + '"]').length ==1; }).show();
             }
          });
       });
   });
});

@import url(//netdna.bootstrapcdn.com/font-awesome/3.2.1/css/font-awesome.css);

/*** basic styles ***/

body { margin: 30px; } 
h1 { font-size: 1.5em; }
label { font-size: 24px; }
div { 
  width: 175px; 
  margin-left: 20px;
}

/*** custom checkboxes ***/

input[type=checkbox] { display:none; } /* to hide the checkbox itself */
input[type=checkbox] + label:before {
  font-family: FontAwesome;
  display: inline-block;
}

input[type=checkbox] + label:before { content: "\f096"; } /* unchecked icon */
input[type=checkbox] + label:before { letter-spacing: 10px; } /* space between checkbox and label */

input[type=checkbox]:checked + label:before { content: "\f046"; } /* checked icon */
input[type=checkbox]:checked + label:before { letter-spacing: 5px; } /* allow space for check mark */
.grid-item {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    flex-direction: column;
    -webkit-box-flex: 0;
    flex-grow: 0;
    flex-shrink: 0;
    flex-basis: 260px;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    position: relative;
    height: 220px;
    margin-right: 10px;
    margin-bottom: 10px;
    font-size: 3rem;
    font-weight: 600;
    color: #000000;
    background: white;
    box-shadow: inset 0px 0px 0px 1px #edeef4;
    -webkit-transform: translate(0, 0);
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate(0, 0);
    transform: translate3d(0, 0, 0);
    -webkit-transition: text-shadow 0.1s ease-in, -webkit-transform 0.14s ease-in;
    transition: text-shadow 0.1s ease-in, -webkit-transform 0.14s ease-in;
    transition: transform 0.14s ease-in, text-shadow 0.1s ease-in;
    transition: transform 0.14s ease-in, text-shadow 0.1s ease-in, -webkit-transform 0.14s ease-in;
    will-change: transform;
    cursor: pointer;
}
.grid {
    display: -webkit-box;
    display: flex;
    -webkit-box-orient: horizontal;
    -webkit-box-direction: normal;
    flex-direction: row;
    flex-wrap: wrap;
    align-content: flex-start;
    -webkit-box-align: center;
    align-items: center;
    -webkit-box-pack: center;
    justify-content: center;
    max-width: 80%;
    height: 100%;
    margin: 0 auto;
    padding: 30px 0 0;
    list-style: none;
}
body {
    background: #ddd;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<h1>Custom Checkboxes</h1>
<div>
  <input id="box1" type="checkbox" value="one"/>
  <label for="box1">Group 1</label>
  <br>
  <input id="box2" type="checkbox" value="two"/>
  <label for="box2">Group 2</label>
    <br>
  <input id="box3" type="checkbox" value="three"/>
  <label for="box3">Group 3</label>
</div>


<ul class="grid">
<li class="grid-item" style="display:none">1<span data-partnumber="MIG1812067" style=""></span></li>

<li class="grid-item" style="display:none">>2<span data-partnumber="MIG1812076" style=""></span></li>
<li class="grid-item" style="display:none">3<span data-partnumber="MIG1812136" style=""></span></li>
</ul>