JQuery фильтрация с несколькими параметрами

Question

Мне нужна помощь, я потратил 1 день, но все равно не смог ...

<div data-src-object="1" data-src-color="blue" data-src-color="green">Product1</div>
<div data-src-object="2" data-src-color="blue" data-src-color="red">Product2</div>
<div data-src-object="3" data-src-color="green">Product3</div>

<div id="filter">
<span class="label label-info" value="blue">Blue</span>
<span class="label label-default" value="red">Red</span>
<span class="label label-default" value="green">Green</span>
</div>


$('div[data-src-object]').filter(function(){ 
return (   )
}).hide();

"показать только объект, для которого существует data-src-color в качестве значения в .label-info, остальные скрыть"

В этом примере будут видны только product1 и product 2

Самым близким, что я думал, было:

$ (this) .attr ('data-src-color')! = $ ('# Filter .label-info'). Val ()

оповещения ($ (это) .attr ( 'данных ЦСИ цвета'))

Но с предупреждением я заметил, что он показывает только первый цвет каждого объекта

Answer 1

Смотрите это jsFiddle

HTML

   <select id="filter">
  <option value="blue">Blue</option>
  <option value="red">Red</option>
  <option value="green">Green</option>
</select>

<div class="color-div" data-src-object="1" data-src-color="blue green">Product1</div>
<div class="color-div" data-src-object="2" data-src-color="blue" data-src-color="red">Product2</div>
<div class="color-div" data-src-object="3" data-src-color="green">Product3</div>

JS

$(document).ready(function(){
    $("#filter").on('change', function(){
    var selectedColor = $(this).val();
    $("div.color-div").each(function(index){
        if($(this).attr("data-src-color").indexOf(selectedColor) > -1) {
        $(this).show();
      } else {
        $(this).hide();
      }
    });
  });

  $("#filter").change();
});

Answer 2

Один из вариантов, который у вас есть, - это data-src-color в значении через запятую.

//Get all values of elements with class label-info
let val = $(".label-info").map(function() {return $(this).attr('value')}).get();

//Select all data-src-object and show all
//Filter the data
//Hide data-src-object with no color on val variable
$('div[data-src-object]').show().filter(function() {
  let data = $(this).data('src-color').split(',') //Get the src-color data and split to form an array
  return !$(data).filter(val).length;             //If 2 arrays dont have a common value, return as true
}).hide();

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div data-src-object="1" data-src-color="blue,green">Product1</div>
<div data-src-object="2" data-src-color="blue,red">Product2</div>
<div data-src-object="3" data-src-color="green">Product3</div>

<div id="filter">
  <span class="label label-info" value="blue">Blue</span>
  <span class="label label-default" value="red">Red</span>
  <span class="label label-default" value="green">Green</span>
</div>