javascript – JQuery – 使用不同输入的多个过滤器过滤数据属性

我正在开发一个项目,我希望使用JQuery来过滤嵌入到页面上的div上的数据变量,它就像一个展示用户将能够以各种方式过滤的展示.所以我的Div中有以下内容;

HTML结果

<divhttps://www.jb51.cc/tag/Box/" target="_blank">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=""https://www.jb51.cc/tag/dis/" target="_blank">display: block;">

数据从sql表中提取,其中数百个是通过相关数据生成的.

我单独使用这个名称得到了以下内容,但我似乎无法找到一种方法来过滤所有其他输入,以及使用这一个输入查看名称和模型.

JS /查询

$('.Box').hide().filter(function() {
    regExName = new RegExp($('#search-name').val().trim(), "ig");
    regExModel = new RegExp($('#search-name').val().trim(), "ig");
    return $(this).data("remote-name").match(regExName);
}).show();

然后,这将是页面顶部和过滤条件所在的位置.它目前包含1个文本输入,2个复选框和2个下拉列表.完成后会有更多,更多的过滤器.

  <div role="form" name="filters-form" id="filters-form">
<div>
  <inputid="search-name" placeholder="Search for name or model..."/>
</div>

<div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box ">
    <label>
      <input type="checkBox" id="dispwitch" value="dispwitch">
      Has Dip Switches?
    </label>
  </div>
  <divhttps://www.jb51.cc/tag/Box/" target="_blank">Box">
    <label>
      <input type="checkBox" id="cloneable" value="cloneable">
      Cloneable?
    </label>
  </div>
</div>  

<div>
  Frequency:
  <selectid="frequency">
    <option value="all">All</option>
    <?PHP foreach ($this->frequencies AS $frequency) {
      echo "<option value=\"" . $frequency->frequency . "\">" . $frequency->frequency . "</option>";
    }?>
  </select>
</div>

<div>
  Manufacturer:
  <selectid="manufacturer">
    <option value="all">All</option>
    <?PHP foreach ($this->manufacturers AS $manufacturer) {
      echo "<option value=\"" . $manufacturer->name . "\">" . $manufacturer->name . "</option>";
    }?>
  </select>
</div>

<div>

</div>

任何帮助将不胜感激.

编辑：
下面是我当前的JS文件以及’data’的输出,’data’是我用来存储过滤器状态的对象.

$(function() {
$('.nav > li#remotes').toggleClass('active');

var data = { dips: null, cloneable: null, freq: null, manufacturer: null }; 

$("#filters-form").on("change keyup paste", function(){
    if ($('#dispwitch').is(':checked')) { data.dips = "1"; } else { data.dips = "0"; }
    if ($('#cloneable').is(':checked')) { data.cloneable = "1"; } else { data.cloneable = "0"; }
    data.freq = $('#frequency').val();
    data.manufacturer = $('#manufacturer').val();

    $('.Box').hide().filter(function() {
        regExName = new RegExp($('#search-name').val().trim(), "ig");
        regExModel = new RegExp($('#search-name').val().trim(), "ig");
        return $(this).data("remote-name").match(regExName); 
        //I took out the prevIoUs answers changes, this currently works filtering via name.
    }).show();
    console.log(data);
}); 

});

EDIT2：
另一件需要注意的是,一些值为true / false / null,因此需要在过滤器中进行说明.例如,我使用以下复选框过滤器半工作;

return $(this).data("remote-name").match(regExName) && $(this).data("remote-clone") == data.cloneable && $(this).data("remote-dips") == data.dips;

但是……对于那些[data-remote-dips =“”]与1或0相反的情况,一旦滤波器打开或关闭一次,就会在刷新之前显示空值.将下拉列表设置为“全部”而不是所需结果的问题相同,它在页面上不显示任何内容.

解决方法:

因此,在玩了半天的JSfiddle后,我设法让它按照我的意愿运行,使用RegExp作为@David Johnson提到过.

https://jsfiddle.net/JokerDan/tqv0ybbz/2/

正在使用HTML

<div></div>
<div id="filterDiv">
  <input type="text"id="0"/>

  <selectid="1">
    <option value="">All</option>
    <option value="a">A</option>
    <option value="b">B</option>
    <option value="c">C</option>
  </select>

  <selectid="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>
<pdata-name="apple" data-a="a" data-b="123" data-test="1">Apple A 123 1</p>
<pdata-name="banana" data-a="b" data-b="123" data-test="0">Banana B 123 0</p>
<pdata-name="cherry" data-a="c" data-b="321" data-test="">Cherry C 321 X</p>
<pdata-name="date" data-a="a" data-b="321" data-test=""> Date A 321 X</p>
<pdata-name="elderBerry" data-a="a" data-b="123" data-test="1">ElderBerry A 123 1</p>
<pdata-name="fig" data-a="c" data-b="231" data-test="1">fig C 231 1</p>

工作JS

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

关于jquery - 计算输入的多个数字和使用jquery计算li的个数的问题就给大家分享到这里，感谢你花时间阅读本站内容，更多关于3种Jquery限制文本框只能输入数字字母的方法_jquery、C#程序：计算输入数字中1的个数、google jQuery 引用文件,jQuery 引用地址集合(jquery 1.2.6至jquery1.5.2)_jquery、javascript – JQuery – 使用不同输入的多个过滤器过滤数据属性等相关知识的信息别忘了在本站进行查找喔。