按输入范围使用jQuery进行筛选

几天前，我在这个论坛上询问了关于jQuery过滤器的问题。有些人帮了我，但现在我需要通过复选框过滤no，而是使用input type=“range”。 可能吗？ 我的代码如下所示：

我的密码

$（文档）.ready（函数（）{
$（'input.szukajnapraw'）。在（'click'，函数（）{
var$checked=$（'input.szukajnapraw:checked'），
$trs=$（'.results>tr'）；
$trs.toggle（！$checked.length）；
如果（$checked.length）{
$checked.每个（函数（）{
var text=$（this.attr（'rel'）.trim（）.toLowerCase（）；
$trs.find（'td:n个孩子（1），td:n个孩子（4），td:n个孩子（7），td:n个孩子（13）'）。过滤器（函数（）{
返回text=$（this.text（）.trim（）.toLowerCase（）；
}).parent（）.show（）；
})
}
}).last（）.change（）；
});

伊洛舍维奇·戴斯科夫
波杰姆诺维奇
Wydajność
生产者
产品
福托
类型
塞纳·内托
塞纳布鲁托
接口
伊洛舍维奇·戴斯科夫
波杰姆诺维奇
突袭
Wydajność
奥皮斯
Specyfikacja
扎库普
Tiger TechnologyMacierz 123测试NAS网络连接存储69.00124.00 Thunderbolt2605TB0 1DużADSADSADASDAWERWASFCAGFAE1
G-TechvcxvDAS直连存储50.0070.00USB 3.054005*5*500dsadsad1
Tiger技术DAS sadSAN存储区域网络50.0070.00ESAA64005/8/8500DASDSA2
LaCieMacierzSAN存储区域网络98.00120.00最小64 TB5DużaTu powinien byćopis，ale testuje i go nie wpisuje！2.
LaciedSasan存储区域网络50.0070.00Thunderbolt84008/8/8500fasdf2
mLogictestDAS直连存储80.00100.00Thunderbolt89005/8/8600fsdfd1
PromiseZdjęcieDAS直连存储4564.00999999.99Thunderbolt451300SPrawdzam czy działaja fotki。1.
承诺直接连接存储45.005.00Thunderbolt1211L1
PromisejjDAS直连存储1.001.00Thunderbolt2JJ1
PromisejjDAS直连存储1.001.00Thunderbolt2JJ1
尝试使用
.each（）
，其中
i
是集合中元素的索引，
el
是元素，
el。value
是循环中当前元素的值

$("input[type=range]").each(function(i, el) {
  console.log(el.value);
});

是的，那是可以做到的。您必须利用
change
事件，而不是
click
事件

由于范围很广，很难找到匹配项，我在默认情况下设置了匹配项，并使用
addClass（）
和
removeClass（）
而不是
hide（）
和
show（）
来演示如何实现这一点。选择任何其他匹配项（如果可以找到），并将范围设置为该匹配项

$(document).ready(function () {
    var ranges = $('div.box > input[type=range]'),
        table  = $('table.table'),
        hrow   = $('tr:has(th)', table),
        orow   = $('tr:has(td)', table);

    ranges.on('change', function() {
        //init range object
        var orange = [];

        //determine value setting & index for each range
        ranges.each(function() {
            var thisrange = {};
            thisrange.value = this.value;
            thisrange.label = $(this).prev('label').text().trim();
            thisrange.column  = $.inArray( thisrange.label, $('th',hrow).map(function(i,v) {
                return $(v).text().trim();
            }) );
            $(this).next('label').text( this.value );
            orange.push( thisrange );
        });

        //hide [remove hightlight] all rows but header
        orow.removeClass('highlight');

        //show [hightlight] rows with values
        orow.filter(function() {
            var result = true,that = this;
            $.each( orange, function(i,v) {
                result = result && $('td',that).eq(v.column).text().trim() == v.value;
            });
            return result;
        }).addClass('highlight');
    }).change();
});


注意：过滤器列中的某些值是非数字的，永远不会在范围内设置！有些数值超出范围

更新

这是一个仅按更改范围过滤的版本。当页面加载时，它将按第一个范围的值进行过滤

$(document).ready(function () {
    var ranges = $('div.box > input[type=range]'),
        table  = $('table.table'),
        hrow   = $('tr:has(th)', table),
        orow   = $('tr:has(td)', table);

    ranges.on('change', function() {
        var value = this.value,
            label = $(this).prev('label').text().trim(),
            column  = $.inArray( label, $('th',hrow).map(function(i,v) {
                return $(v).text().trim();
            }) );

        //display the new value
        $(this).next('label').text( value );

        //hide [remove hightlight] all rows but header
        orow.removeClass('highlight');

        //show [hightlight] rows with values
        orow.filter(function() {
            return $('td',this).eq(column).text().trim() == value;
        }).addClass('highlight');
    }).eq(0).change();
});

那么，@patwoj98，你的问题是什么？您想过滤什么和如何过滤？首先，我想知道：是否可以使用jQuery by input=“range”值过滤表TD？如果是，怎么做？@patwoj98预期的结果是什么？过滤器是什么？这是我的完整代码：当我单击复选框时，它只显示像复选框alt这样的值。现在我想做同样的操作，但要使用范围。@patwoj98需要在
的
上记录
输入type=“range”
值，单击
“input.szukajnapraw”
？，或者在
js
的单独块中，可以将onchange添加到JSFIDLE函数中进行搜索吗？例如：range value=“10”，td编号8正在搜索，相同的值在哪里，显示它。很好，就是它。但它不起作用。范围1使用8列，范围2使用9，范围3使用11。你能做到吗？不确定你是否知道你想要什么：）它正在工作，但是你改变了索引，现在它不工作了。索引是动态拾取的。事实上，我已经升级到一个更具动态性的版本——请参阅更新。在你改变之前，试着跟随正在发生的事情；这很直截了当。让我知道我是否应该添加更多的评论：）我的英语很低，所以我很难说出我的意思：）当“Ilośćdysków”范围为5时，它应该只显示td“Ilośćdysków”等于5的表行。你知道我的意思吗？它在您的代码中不起作用：（您想同时应用所有范围吗？还是一次只应用一个范围？如果您花时间使用开发工具，您会看到类
高亮显示
被正确添加，即使在页面加载时也是如此。但是，
高亮显示
类的规则与规则
.table striped>tbo冲突dy>tr:n类型（奇数）{background color:#f9f9f9；}
。为了确认，找到规则并将其注释掉。当然，更好的解决方案是使
的规则比上述规则更具体。：）