如何使用jquery/javascript创建多个筛选器列表

如何使用jquery/javascript创建多个筛选器列表,javascript,jquery,Javascript,Jquery,我有一个html,我可以根据他们的数据进行过滤,但我不知道如何组合它 这是我的脚本,搜索名称已在工作,但单选按钮处于活动状态仍不工作,需要添加到我的筛选器中。我不知道如何把它放在过滤器上 $('input[type=text][name=search\u name')。关于('input',函数(e){ e、 停止传播(); e、 预防默认值(); var fullname=$(this.val(); var isActive=$('input[type=radio][name=isActiv

我有一个html,我可以根据他们的数据进行过滤,但我不知道如何组合它

这是我的脚本,搜索名称已在工作,但单选按钮
处于活动状态
仍不工作,需要添加到我的筛选器中。我不知道如何把它放在过滤器上

$('input[type=text][name=search\u name')。关于('input',函数(e){
e、 停止传播();
e、 预防默认值();
var fullname=$(this.val();
var isActive=$('input[type=radio][name=isActive]')。val();
searchStudent(全名,isActive);
});
$('input[type=radio][name=isActive]')。在('change',函数(e)上{
e、 停止传播();
e、 预防默认值();
var fullname=$('input[type=text][name=search_name').val();
var isActive=$(this.val();
searchStudent(全名,isActive);
});
函数searchStudent(全名,isActive){
$(“ul li”)。每个(函数(){
//我不知道如何添加isActive
if($(this).data('fullname').search(新的RegExp(fullname,“i”))<0){
$(this.hide();
}否则{
$(this.show();
}
});
}

全部的
活跃的
不活跃的
  • Jerald Patalinghug
  • Eldrin Gok ong
  • Uelmar-Ortega

更改jQuery选择器以排除您不想要的
数据为活动的属性:

$("ul li:not([data-isActive='0'])").each(function () {
    ...
}

我建议使用一个
update
函数,当输入或文本字段都更改时调用该函数。 在这个
update
函数中,您将查询选中的复选框和文本字段

其他解决方案可能意味着记录所选的值或预先选择相关元素以避免每次查询DOM,但在我看来,这不值得

$('input[type=text][name=search\u name')。在('input',updateFilter');
$('input[type=radio][name=isActive]')。在('change',updateFilter)上;
函数updateFilter(){
var fullname=$('input[type=text][name=search_name').val();
var isActive=$('input[type=radio][name=isActive]:checked').val();
searchStudent(全名,+isActive);
}
函数searchStudent(全名,isActive){
$(“ul li”)。每个(函数(){
if($(this).data('fullname').search(新的RegExp(fullname,“i”))<0
||isActive!==2&&+$(this.data('isActive')!==isActive){
$(this.hide();
}否则{
$(this.show();
}
});
}

全部的
活跃的
不活跃的
  • Jerald Patalinghug
  • Eldrin Gok ong
  • Uelmar-Ortega

只需在当前的if语句中添加一个检查。我确实重构了您的代码,因为我自己也遇到了一些问题。这主要是因为我的IDE让我很恼火

但是这个片段很有效,我希望它能帮助你

$(“输入[name='search\u name'])。在(“输入”,函数()上){
var fullname=$(this.val();
var isActive=$(“输入[type='radio'][name='isActive']:选中”).val();
searchStudent(全名,isActive);
//如果输入为空,只需触发选中的单选按钮
如果(全名==“”)
$(“输入[type='radio'][name='isActive']:选中”).change();
});
$(“输入[name='isActive']”)。更改(函数(){
var fullname=$(“输入[name='search_name']”)val();
var isActive=$(this.val();
searchStudent(全名,isActive);
})
函数searchStudent(pFullName,pIsActive)
{
$(“ul li”)。每个(函数(){
var元素=$(此);
var isActive=element.attr(“数据isActive”);
if((element.data(“fullname”).search(newregexp(pFullName,“i”))>=0)和&parseInt(isActive)==parseInt(pIsActive))
元素show();
其他的
元素。隐藏();
});
}

全部的
活跃的
不活跃的
  • Jerald Patalinghug
  • Eldrin Gok ong
  • Uelmar-Ortega

这不起作用,因为我需要搜索所有列表。然后根据筛选器隐藏或显示它们。此答案不会搜索所有列表,也不能根据筛选器隐藏它们。
+$(此)前面的
+
有什么意义。数据('isactive'))
+isActive
使用
+
来确保值是一个数字,以便
==
比较工作。例如,
+“12”===12
。您也可以仅使用字符串。但由于值是数字,我认为最好将其作为数字使用。