Форум

sergey24 · #1 (**permalink**) 03.05.2018, 17:38

Имеется список div блоков у которых задан атрибут data-page (числовое значение). Требуется при загрузке страницы проверить эти блоки на соответствие условию (в примере, что значение больше либо равно 1 и меньше либо равно 20). Через id написал код, который работает. А для классов не получается. Буду рад помощи.

<div class="item" data-page="10" id="qwe"></div>
<div class="item" data-page="10"></div>
<div class="item" data-page="25"></div>

Рабочий JS для 1 блока:

var cmd = $('#qwe').attr('data-page');
	if (cmd >= 1 && cmd <= 20)
	{
		$('#qwe').css('display','block');
	} else {
		$('#qwe').css('display','none');
	};

Не рабочий JS для списка:

if ($('.item').attr('data-page') >= 1 && $('.item').attr('data-page') <= 20)
	{
		$(this).css('display','block');
	} else {
		$(this).css('display','none');
	};

рони · #2 (**permalink**) 03.05.2018, 18:19

sergey24,
только цикл
http://api.jquery.com/each/

sergey24 · #3 (**permalink**) 03.05.2018, 18:43

рони,
Спасибо за подсказку

Может кому-то понадобится, вот решение.

$( ".item" ).each(function(  ) {
    if ( $(this).attr('data-page') >= 1 && $(this).attr('data-page') <= 20) {
      $(this).css('display','block');
    } else {
      $(this).css('display','none');
    }
	});

рони · #4 (**permalink**) 03.05.2018, 19:12

sergey24,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <script>
$(function() {
$( ".item" ).each(function() {
    var el = $(this), page = el.data("page");
    el.toggle(page >=1 && page <= 20)
	});
});
  </script>
</head>

<body>

<div class="item" data-page="10">10</div>
<div class="item" data-page="10">10</div>
<div class="item" data-page="25">25</div>

</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript