Javascript JQuery-使用不同输入的多个过滤器过滤数据属性
我正在从事一个项目,在这个项目中,我希望使用JQuery来过滤嵌入到页面上div中的数据变量,这有点像一个展示窗口,用户可以在其中以各种方式进行过滤。因此,我的部门中有以下内容: HTML结果Javascript JQuery-使用不同输入的多个过滤器过滤数据属性,javascript,php,jquery,html,filter,Javascript,Php,Jquery,Html,Filter,我正在从事一个项目,在这个项目中,我希望使用JQuery来过滤嵌入到页面上div中的数据变量,这有点像一个展示窗口,用户可以在其中以各种方式进行过滤。因此,我的部门中有以下内容: HTML结果 <div class="box col-xs-6 col-sm-4 col-md-3 col-lg-2" data-remote-name="BFT Mitto B RCB - 2 Button Remote" data-remote-model="Mitto B RCB 2"
<div class="box col-xs-6 col-sm-4 col-md-3 col-lg-2"
data-remote-name="BFT Mitto B RCB - 2 Button Remote"
data-remote-model="Mitto B RCB 2"
data-remote-freq="433"
data-remote-dips=""
data-remote-clone="" style="display: block;">
然后,这将显示在页面顶部,并显示过滤条件。它当前包含1个文本输入、2个复选框和2个下拉列表。完成后,将有更多的过滤器
<div role="form" name="filters-form" id="filters-form">
<div class="col-sm-12">
<input class="form-control" id="search-name" placeholder="Search for name or model..."/>
</div>
<div class="col-sm-3 col-xs-6">
<div class="checkbox ">
<label>
<input type="checkbox" id="dispwitch" value="dispwitch">
Has Dip Switches?
</label>
</div>
<div class="checkbox">
<label>
<input type="checkbox" id="cloneable" value="cloneable">
Cloneable?
</label>
</div>
</div>
<div class="col-sm-3 col-xs-6">
Frequency:
<select class="freq-dropdown form-control" id="frequency" style="width:100%;">
<option value="all">All</option>
<?php foreach ($this->frequencies AS $frequency) {
echo "<option value=\"" . $frequency->frequency . "\">" . $frequency->frequency . "</option>";
}?>
</select>
</div>
<div class="col-sm-3 col-xs-6">
Manufacturer:
<select class="manufacturer-dropdown form-control" id="manufacturer" style="width:100%;">
<option value="all">All</option>
<?php foreach ($this->manufacturers AS $manufacturer) {
echo "<option value=\"" . $manufacturer->name . "\">" . $manufacturer->name . "</option>";
}?>
</select>
</div>
<div class="col-sm-3 col-xs-6">
</div>
}))
编辑2:
另一件值得注意的事情是,一些值是true/false/null,因此需要在过滤器中考虑这些值。例如,我得到了一个复选框过滤器,用于处理以下内容:
return $(this).data("remote-name").match(regExName) && $(this).data("remote-clone") == data.cloneable && $(this).data("remote-dips") == data.dips;
但是。。。对于那些具有与1或0相反的
[data remote dips=”“]
的过滤器,一旦一次打开或关闭过滤器,则在刷新之前不会显示空值。同样的问题是,如果将下拉列表设置为“全部”,而不是所需的结果,则页面上不会显示任何内容。您不需要像这样扩展条件吗:
freq = new RegExp($('#frequency').val().trim(), "ig");
dips= new RegExp($('#dispwitch').val().trim(), "ig");
clone= new RegExp($('#cloneable').val().trim(), "ig");
return $(this).data("remote-name").match(regExName) || $(this).data("remote-freq").match(freq) || $(this).data("remote-dips").match(dips) || $(this).data("remote-clone").match(clone)
因此,在玩了半天JSFIDLE之后,我使用@David Johnson提到的RegExp,设法让它按我所希望的那样工作 工作HTML
<div class="status"></div>
<div id="filterDiv">
<input type="text" class="myInput" id="0"/>
<select class="mySel" id="1">
<option value="">All</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select class="mySel" id="2">
<option value="">All</option>
<option value="123">123</option>
<option value="231">231</option>
<option value="321">321</option>
</select>
<input type="checkbox" id="3"> Test Data :: 1 | 0 | NULL
</div>
<p class="p a 123" data-name="apple" data-a="a" data-b="123" data-test="1">Apple A 123 1</p>
<p class="p b 123" data-name="banana" data-a="b" data-b="123" data-test="0">Banana B 123 0</p>
<p class="p c 321" data-name="cherry" data-a="c" data-b="321" data-test="">Cherry C 321 X</p>
<p class="p a 321" data-name="date" data-a="a" data-b="321" data-test=""> Date A 321 X</p>
<p class="p a 123" data-name="elderberry" data-a="a" data-b="123" data-test="1">Elderberry A 123 1</p>
<p class="p c 231" data-name="fig" data-a="c" data-b="231" data-test="1">Fig C 231 1</p>
似乎不起作用,文本过滤器现在根本不过滤,而是全部隐藏,可选过滤器没有效果。控制台显示的类型错误为:TypeError:$(…).data(…).match不是一个函数//…(“远程名称”).match(regExName)| |$(this).data(“远程频率”).match(频率)|$/$(this).data(“远程频率”)上显示错误。
freq = new RegExp($('#frequency').val().trim(), "ig");
dips= new RegExp($('#dispwitch').val().trim(), "ig");
clone= new RegExp($('#cloneable').val().trim(), "ig");
return $(this).data("remote-name").match(regExName) || $(this).data("remote-freq").match(freq) || $(this).data("remote-dips").match(dips) || $(this).data("remote-clone").match(clone)
<div class="status"></div>
<div id="filterDiv">
<input type="text" class="myInput" id="0"/>
<select class="mySel" id="1">
<option value="">All</option>
<option value="a">A</option>
<option value="b">B</option>
<option value="c">C</option>
</select>
<select class="mySel" id="2">
<option value="">All</option>
<option value="123">123</option>
<option value="231">231</option>
<option value="321">321</option>
</select>
<input type="checkbox" id="3"> Test Data :: 1 | 0 | NULL
</div>
<p class="p a 123" data-name="apple" data-a="a" data-b="123" data-test="1">Apple A 123 1</p>
<p class="p b 123" data-name="banana" data-a="b" data-b="123" data-test="0">Banana B 123 0</p>
<p class="p c 321" data-name="cherry" data-a="c" data-b="321" data-test="">Cherry C 321 X</p>
<p class="p a 321" data-name="date" data-a="a" data-b="321" data-test=""> Date A 321 X</p>
<p class="p a 123" data-name="elderberry" data-a="a" data-b="123" data-test="1">Elderberry A 123 1</p>
<p class="p c 231" data-name="fig" data-a="c" data-b="231" data-test="1">Fig C 231 1</p>
$('#filterDiv').on("change keyup", function() {
chkBox = { datatest: null };
if ($('#3').is(':checked')) { chkBox.datatest = "1"; } else { chkBox.datatest = ""; }
$("p").hide().filter(function() {
var rtnData = "";
regExName = new RegExp($('#0').val().trim(), "ig");
regExA = new RegExp($('#1').val().trim(), "ig");
regExB = new RegExp($('#2').val().trim(), "ig");
regExTest = new RegExp(chkBox.datatest, "ig")
rtnData = (
$(this).attr("data-name").match(regExName) &&
$(this).attr("data-a").match(regExA) &&
$(this).attr("data-b").match(regExB) &&
$(this).attr("data-test").match(regExTest)
);
//console.log(rtnData);
return rtnData;
}).show();
});