Опция фильтра в jQuery

Question

В списке представлены данные, связанные с определенными элементами, например, ниже показаны данные, добавленные к одному элементу с помощью jQuery, первый:

$('ul li :first').data('job', 'Developer');
$('ul li :first').data('company', 'Microsoft');
$('ul li :first').data('location', 'UK');

Где job, data, location у всех есть флажки, из которых пользователь может выбрать, например:

<label>
    Developer<input type="checkbox"/>
</label>
<label>
    Tester<input type="checkbox"/>
</label>
<label>
    Lead Developer<input type="checkbox"/>
</label>
<label>
    Google<input type="checkbox"/>
</label>
<label>
    Microsoft<input type="checkbox"/>
</label>
<label>
    UK<input type="checkbox"/>
</label>
<label>
    US<input type="checkbox"/>
</label>

Изначально отображаются все элементы в списке. Когда пользователь устанавливает флажок, все элементы в списке, которые не имеют этого атрибута, скрываются.

Кто-нибудь знает подход, который я могу использовать, когда есть несколько вариантов работы, компании и местоположения?

Answer 1

Если вы посмотрите документацию jQuery data () , вы увидите, что это может быть любой тип Javascript, включая Array или Object.

Так что вы можете сделать:

$('ul li:first').data('job', ['Developer', 'Cleaner', 'Cook', 'Time waster']);

или

$('ul li:first').data([{
  job: "Developer",
  company: "Microsoft",
  location: "UK"
},{
  job: "Manager",
  company: "Freelance",
  location: "Moon"
}]);

Затем вы можете добавить push-элементы в массив.

$('#my_checkbox').check(function(){
    $('ul li:first').data("job").push($(this).value());
});

Или добавьте элементы в хеш, или делайте все, что вы хотите с выбранной структурой данных.