Форум

banditman · #1 (**permalink**) 23.04.2017, 17:38

Приветствую, подскажите можно ли реализовать фильтр по диапазону параметров с 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 ки он окрасит в красную рамку, а как коректно все это дело отфильтровать, что бы при нажатии на кнопку нужные остались, а не нужные пропали? При нажатии на вторую кнопку показались другие строки с заданными параметрами?
Заранее благодарю за помощь!

Nexus · #2 (**permalink**) 23.04.2017, 18:37

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>

banditman · #3 (**permalink**) 24.04.2017, 14:56

Спасибо большое, дальше буду настраивать под свои нужды)))

Форум

Справочник

Discord чат

Курсы javascript