几天前，我在这个论坛上询问过使用jQuery过滤器。有些人帮助了我，但现在我需要通过复选框来过滤否，但输入类型=“范围”。 可能吗？ 我的代码看起来像： JSFIDDLE
我的代码。
$(document).ready(function () {
$('input.szukajnapraw').on('click', function () {
var $checked = $('input.szukajnapraw:checked'),
$trs = $('.results > tr');
$trs.toggle(!$checked.length);
if ($checked.length) {
$checked.each(function () {
var text = $(this).attr('rel').trim().toLowerCase();
$trs.find('td:nth-child(1),td:nth-child(4),td:nth-child(7),td:nth-child(13)').filter(function(){
return text == $(this).text().trim().toLowerCase();
}).parent().show();
})
}
}).last().change();
});<div class="box col-md-10 items">
<label>Ilość dysków</label>
<input type="range" min="1" max="24" />
</div>
<div class="box col-md-10 items">
<label>Pojemność</label>
<input type="range" id="range1" min="1" max="96" />
</div>
<div class="box col-md-10 items">
<label>Wydajność</label>
<input type="range" min="50" max="2000" />
</div>
<table class="table table-striped table-bordered">
<thead>
<tr>
<th>Producent</th>
<th>Produkt</th>
<th>Foto</th>
<th>Typ</th>
<th>Cena netto</th>
<th>Cena brutto</th>
<th>Interface</th>
<th>Ilość dysków</th>
<th>Pojemność</th>
<th>RAID</th>
<th>Wydajność</th>
<th>Opis</th>
<th>Specyfikacja</th>
<th>Zakup</th>
</tr>
</thead>
<tbody class="results">
<tr> <td>Tiger Technology</td><td>Macierz 123 TEST</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;"/></td><td>NAS Network Attached Storage</td><td>69.00</td><td>124.00</td><td>Thunderbolt2</td><td>60</td><td>5tb</td><td>0 1</td><td>Duża</td><td>dsadsadasdawderwasfcagfae</td><td style='display:none;'>1</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='30' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>G-Tech</td><td>vcxv</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>50.00</td><td>70.00</td><td>USB 3.0</td><td>5</td><td>400</td><td>5*5*</td><td>500</td><td>dsadsad</td><td style='display:none;'>1</td><td><a href=http://www.o2.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='34' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Tiger Technology</td><td>das sad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>eSATA</td><td>6</td><td>400</td><td>5/8/8</td><td>500</td><td>dasdasdsa</td><td style='display:none;'>2</td><td><a href=http://www.nw.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='35' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>LaCie</td><td>Macierz</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>98.00</td><td>120.00</td><td>miniSAS</td><td>6</td><td>4 TB</td><td>5</td><td>Duża</td><td>Tu powinien być opis, ale testuje i go nie wpisuje! </td><td style='display:none;'>2</td><td><a href=http://www.google.pl target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='36' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>LaCie</td><td>dsad</td><td><img src="admin/forms/temp/IMG_20150504_074450.jpg" style = "width:50px;height:50px;"/></td><td>SAN Srorage Area Network</td><td>50.00</td><td>70.00</td><td>Thunderbolt</td><td>8</td><td>400</td><td>8/8/8</td><td>500</td><td>fasdf</td><td style='display:none;'>2</td><td><a href=http://fsdfsdf target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='37' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>mLogic</td><td>test</td><td><img src="admin/forms/temp/ff.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>80.00</td><td>100.00</td><td>Thunderbolt</td><td>8</td><td>900</td><td>5/8/8</td><td>600</td><td>fsdfd</td><td style='display:none;'>1</td><td><a href=http://fsdfds target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='38' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>Zdjęcie</td><td><img src="admin/forms/temp/depositphotos_12071772-Website-Development-PHP-HTML-Arrows.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>4564.00</td><td>999999.99</td><td>Thunderbolt</td><td>4</td><td>5</td><td>1</td><td>300</td><td>SPrawdzam czy działaja fotki .... .... .. .. .. .</td><td style='display:none;'>1</td><td><a href=http://feasd target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='39' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>g</td><td><img src="admin/forms/temp/rc.jpg" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>45.00</td><td>5.00</td><td>Thunderbolt</td><td>12</td><td>1</td><td>1</td><td>l</td><td>l</td><td style='display:none;'>1</td><td><a href=http://l target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='40' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='43' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr><tr> <td>Promise</td><td>jj</td><td><img src="admin/forms/temp/" style = "width:50px;height:50px;"/></td><td>DAS Direct Attached Storage</td><td>1.00</td><td>1.00</td><td>Thunderbolt</td><td>2</td><td>j</td><td>j</td><td>j</td><td>n</td><td style='display:none;'>1</td><td><a href=http://j target='_blank'>Specyfikacja producenta</a></td><td><form action='' method='POST'>
<input type='hidden' name='id' value='44' />
<input class='btn btn-primary btn-sm' type='submit' name='koszykAdd' value='Dodaj do koszyka'/></form></td></tr> </tbody>
</table>
答案 0 :(得分：1)
尝试使用.each()，其中i是集合中元素的索引，el是元素，el.value是循环中当前元素input type="range"的值< / p>
$("input[type=range]").each(function(i, el) {
console.log(el.value);
});
答案 1 :(得分：1)
是的，可以做到。您必须利用change事件，而不是click事件。
由于范围很广，而且很难找到匹配项，因此我默认设置了匹配项并使用addClass()和removeClass()代替hide()和{{ 1}}只是为了演示如何处理这个问题。选择任何其他匹配项，如果可以找到，并设置范围。
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();
});