jQuery中的选项过滤器答案

【问题标题】：Option filter in jQueryjQuery中的选项过滤器
【发布时间】：2011-11-04 17:36:01
【问题描述】：

列表中有与某些项目相关的数据，例如下面显示使用 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>

最初显示列表中的所有项目。当用户选中一个复选框时，列表中不具有该属性的所有项目都将被隐藏。

在工作、公司和地点有多种选择的情况下，有谁知道我可以采取的一种方法？

【问题讨论】：

标签： javascript jquery search checkbox filter

【解决方案1】：

如果您查看 jQuery data() 文档，您会看到该值可以是任何 Javascript 类型，包括数组或对象。

所以你可以这样做：

$('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"
}]);

然后您可以将推送成员添加到数组。

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

或者将元素添加到哈希中，或者对你选择的数据结构做任何你想做的事情。

【讨论】：