Фильтр на Jquery
Приветствую, подскажите можно ли реализовать фильтр по диапазону параметров с 2-мя кнопками например:
Показать: Вес от 1 до 10 Вес от 10 до 30 По умолчанию показываются все div-ы с этими значениями сам html к примеру: <button class="one">Вес от 1 до 10</button> <button class="two">Вес от 20 до 30</button> <div class="product-field-display">10</div> <div class="product-field-display">20</div> <div class="product-field-display">10</div> <div class="product-field-display">10</div> <div class="product-field-display">10</div> <div class="product-field-display">20</div> <div class="product-field-display">30</div> как можно сравнить данные параметры, сам в java не особо силен, т.к. занимаюсь версткой! Но заметил если вызывать по
if ("div:contains('1')"<"div:contains('10')") {
$('.one').click(function(){ $("div:contains('10')").css('border', '1px solid red'); });
};
то все 10 ки он окрасит в красную рамку, а как коректно все это дело отфильтровать, что бы при нажатии на кнопку нужные остались, а не нужные пропали? При нажатии на вторую кнопку показались другие строки с заданными параметрами? Заранее благодарю за помощь! |
banditman,
<!DOCTYPE html>
<html>
<head>
<title>Untitled</title>
<meta charset="utf-8">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script>
$(function(){
$('.one,.two').click(function(){
var $btn=$(this);
$('.product-field-display').hide().each(function(){
var value=parseFloat($.trim($(this).text()));
if(
$btn.hasClass('one') && value>=1 && value<=10 ||
$btn.hasClass('two') && value>=20 && value<=30
)
$(this).show();
});
});
});
</script>
</head>
<body>
<button class="one">Вес от 1 до 10</button>
<button class="two">Вес от 20 до 30</button>
<div class="product-field-display">10</div>
<div class="product-field-display">20</div>
<div class="product-field-display">10</div>
<div class="product-field-display">10</div>
<div class="product-field-display">10</div>
<div class="product-field-display">20</div>
<div class="product-field-display">30</div>
</body>
</html>
|
Спасибо большое, дальше буду настраивать под свои нужды)))
|
| Часовой пояс GMT +3, время: 03:59. |