Форум

Алмат · #1 (**permalink**) 30.08.2016, 15:45

Добрый день! Пересмотрел кучу примеров слайдеров, но так как у меня их в коде планируется ооочень много не охота возиться и отрисовывать каждый отдельно. В общем, сделал отрисовку слайдеров циклом, а вот значения вывести никак не получается. Значения будут в дальнейшем использоваться, каждый слайдер будет задавать параметр для расчета. Подкиньте плиз идеи, кто как видит решение задачи.

let obj= {
    
        cv: {
            min: 0,
            max: 100,
            value: 50,
            name: 'slidercv',
            
        },
        cs: {
            min: 0,
            max: 100,
            value: 50,
            name: 'slidercs',
            
        },
        cd: {
            min: 0,
            max: 100,
            value: 50,
            name: 'slidercd',
            
        },
    };
        let index;
        $(function() {
        for (index in obj){
            $('#'+obj[index].name).slider({
                value: obj[index].value,
                max: obj[index].max,
                min: obj[index].min,
           
        })
        }
    })
        
</script>
</head>
 <body>
<table>
    <tr>
        <td>требуемый объем цемента</td>
        <td><div id="slidercv" ></div></td> <
        </tr>
        <tr>
        <td>компонент1</td>
        <td><div id="slidercv" ></div></td> <
        </tr>
<tr>
        <td>компонент2</td>
        <td><div id="slidercd" ></div></td> <
        </tr>

</table>
</body>
</html>

Алмат · #2 (**permalink**) 30.08.2016, 16:03

ага, спасибо, есть такое, но у меня не с этим проблема, проблема с выводом самих значений слайдеров, пробовал по обычной схеме slide: function( event, ui ) {$( "#slider-result" ).html( ui.value );} и вывод в инпут, но для итерации это не подходит

рони · #3 (**permalink**) 30.08.2016, 16:08

Сообщение от Алмат

но для итерации это не подходит

подходит, какие проблемы?

Rise · #4 (**permalink**) 30.08.2016, 16:15

Алмат, и на jquery правильно так писать:

$(function() {
	$.each({
		'slidercv': {
			min: 0,
			max: 100,
			value: 50
		},
		'slidercs': {
			min: 0,
			max: 100,
			value: 50
		},
		'slidercd': {
			min: 0,
			max: 100,
			value: 50
		}
	}, function(id, params) {
		$('#'+ id).slider(params);
	});
});

Алмат · #5 (**permalink**) 30.08.2016, 16:17

рони,
пробовал сделать так, сам понимаю, что фигня полная, цикл в цикле -бред, но не хватает знаний, это моя первая пробная задачка. Ну а так значение выдается во все инпуты с последнего действия одинаковое

$(function() {
        for (index in obj){
            $('#'+obj[index].name).slider({
                value: obj[index].value,
                max: obj[index].max,
                min: obj[index].min,
            slide: function(event, ui) {
                $('#'+obj[index].itog).val(ui.value).trigger("change");
            }
        })
        }
        for (index in obj){
        $('#'+obj[index].itog).val($('#'+obj[index].name).slider("value"));
    }
    });

Алмат · #6 (**permalink**) 30.08.2016, 16:18

Rise,
спасибо, похоже это решит мою проблему

Алмат · #7 (**permalink**) 30.08.2016, 16:34

ох черт, все равно не понимаю, как теперь забрать значения из слайдеров

рони · #8 (**permalink**) 30.08.2016, 17:07

Алмат,
попробуйте описать что вы хотите делать с значениями?
заведите массив -- каждый слайдер меняет только свою ячейку после этого идёт обработка массива -- всё вся функция что бы вы там не придумали.

Алмат · #9 (**permalink**) 30.08.2016, 17:08

Получить значение и вывести его в html, в html создаю инпуты <input id="amountcv", <input id="amountcs", <input id="amountcd", и так понимаю что используя slide: function( event, ui ) {$( "#ТУТ мои amountы" ).html( ui.value );} можно получить значения от бегунков на слайдере, потом их еще надо будет использовать для математических операций

рони · #10 (**permalink**) 30.08.2016, 17:32

Алмат,

<!DOCTYPE html>

<html>
<head>
  <title>Untitled</title>
  <meta charset="utf-8">
  <style type="text/css">
  .slider{
  width: 300px;
  margin: 10px;
}
  </style>
  <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
  <link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/south-street/jquery-ui.css">
  <script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
  <script>
$(function() {
    var arr = [];
    function foo()
    {
       $(".res").text(arr)// тут все значения, делайте что хотите
    };
    $(".opt").each(function(i, el) {
            arr[i] = 50;
        var am = $(".amount", el),
            sl = $(".slider", el);
        sl.slider({
            min: 0,
            max: 100,
            step: 1,
            slide: function(event, ui) {
                am.val(ui.value);
                arr[i] = +ui.value;
                foo()
            },
            change: function(event, ui) {
                am.val(ui.value)
            }
        });
        sl.slider("option", "value", 50)
    });
    foo()
});
  </script>
</head>

<body>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="opt">
  <div class="slider"></div>
  <input type="text" class="amount" readonly>
</div>
<div class="res"></div>
</body>
</html>

Форум

Справочник

Discord чат

Курсы javascript