Форум

RuBAN · #1 (**permalink**) 06.08.2013, 02:24

Здравствуйте! Решил сделать несложный фильтер для сайта, но повис на мелком: http://jqueryui.com/slider/#rangemax
Есть слайдер, вот его html код: <div data-min="0" data-max="30000" class="f-slider">
Причём он будет в дальнейшем не один, поэтому попытался универсально написать на JQ:

$(function() {
	$('.f-slider').slider({
		range: true,
		animate: true,
		min: $(this).data('min'),
		max: $(this).data('max'),
		values: [ $(this).data('min'), $(this).data('max') ],
		slide: function( event, ui ) {
			$(this).parent('.f-slider-block').parent('.f-value').children('.min-value').val(ui.values[0]);
			$(this).parent('.f-slider-block').parent('.f-value').children('.max-value').val(ui.values[1]);
		}
	});			
	$(this).parent('.f-slider-block').parent('.f-value').children('.max-value').val( $('.f-slider').slider('values', 0) + $('.f-slider').slider('values', 1));
});

Однако при $(this).data('max') почему-то не возвращается значение атрибута.
Элементы с классами min-value и max-value - обыкновенные текстовые поля.
Подскажите, в чём ошибка?
Заранее спасибо!
P.S. при attr тоже самое.

рони · #2 (**permalink**) 06.08.2013, 03:27

RuBAN,
используйте each

рони · #3 (**permalink**) 06.08.2013, 03:47

RuBAN,

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>jQuery UI Slider - Range slider</title>
  <link rel="stylesheet" href="http://code.jquery.com/ui/1.10.2/themes/smoothness/jquery-ui.css">
  <script src="http://code.jquery.com/jquery-1.9.1.js"></script>
  <script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
  <script>
          $(function() {
    $('.f-slider').each(function (i, b) {
    var max = $(b).data('max'), min = $(b).data('min'), parent = $(b).parents('.f-value'),
    min_input = $('.min-value', parent),max_input = $('.max-value', parent);
    $(b).slider({
        range: true,
        animate: true,
        min: min,
        max: max,
        values: [ min, max ],
        slide: function( event, ui ) {
            min_input.val(ui.values[0]);
            max_input.val(ui.values[1]);
        }
    });

    min_input.val( min);
    max_input.val( max);
  });

  })

  </script>
</head>

<body>
  <div class="f-value">
    <input type="text" class="min-value"> <input type="text" class="max-value">
    <div class="f-slider-block">
      <div data-min="0" data-max="30000" class="f-slider"></div>
    </div>
  </div>

  <div class="f-value">
    <input type="text" class="min-value"> <input type="text" class="max-value">
    <div class="f-slider-block">
      <div data-min="0" data-max="500" class="f-slider"></div>
    </div>
  </div>
</body>
</html>

RuBAN · #4 (**permalink**) 06.08.2013, 13:11

Спасибо!

Форум

Справочник

Discord чат

Курсы javascript