Помогите вывести значения из слайдеров
Добрый день! Пересмотрел кучу примеров слайдеров, но так как у меня их в коде планируется ооочень много не охота возиться и отрисовывать каждый отдельно. В общем, сделал отрисовку слайдеров циклом, а вот значения вывести никак не получается. Значения будут в дальнейшем использоваться, каждый слайдер будет задавать параметр для расчета. Подкиньте плиз идеи, кто как видит решение задачи.
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>
|
ага, спасибо, есть такое, но у меня не с этим проблема, проблема с выводом самих значений слайдеров, пробовал по обычной схеме slide: function( event, ui ) {$( "#slider-result" ).html( ui.value );} и вывод в инпут, но для итерации это не подходит
|
Цитата:
|
Алмат, и на 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);
});
});
|
рони,
пробовал сделать так, сам понимаю, что фигня полная, цикл в цикле -бред, но не хватает знаний, это моя первая пробная задачка. Ну а так значение выдается во все инпуты с последнего действия одинаковое
$(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"));
}
});
|
Rise,
спасибо, похоже это решит мою проблему:) |
ох черт, все равно не понимаю, как теперь забрать значения из слайдеров:blink:
|
Алмат,
попробуйте описать что вы хотите делать с значениями? заведите массив -- каждый слайдер меняет только свою ячейку после этого идёт обработка массива -- всё вся функция что бы вы там не придумали. |
Получить значение и вывести его в html, в html создаю инпуты <input id="amountcv", <input id="amountcs", <input id="amountcd", и так понимаю что используя slide: function( event, ui ) {$( "#ТУТ мои amountы" ).html( ui.value );} можно получить значения от бегунков на слайдере, потом их еще надо будет использовать для математических операций
|
Алмат,
<!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>
|
рони,ого, вы прям весь код написали. Спасибо, здорово, только как новичку не очень понятно( Я понимаю, что время ценно, но вдруг если найдется немного лишнего времени, очень поможете, если добавите подробные комментарии или поделитесь полезными ссылочками, где это есть. Хотелось бы понимать, а в учебнике такого нет и нагуглить не могу. беда прям
|
Алмат,
http://javascript.ru/forum/jquery/43...tml#post425115 http://javascript.ru/forum/dom-windo...tml#post409701 поиск по форуму тут этого добра много ... |
я видел да, смотрел уже. но вспомните, вы ведь когда-то тоже были новичком)) я смотрю и вижу кое где код, а где-то просто набор непонятных символов. Мне интересно разобраться, что именно последовательно делает этот код. Мне не очень ясна здесь работа с массивом, и что именно делает $(".opt").
|
уж простите дурака, что занимаю время
|
и что такое sliders[i] = 50
|
Цитата:
Цитата:
|
о как)))) спасибо, буду разбираться
|
Цитата:
|
Rise,
:)
<!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>
<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() {
$(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).on({
'slide': function(event, ui) {
event.data.val(ui.value);
},
'slidechange': function(event, ui) {
alert(event.data.val());
}
}, $('#'+ id + '-result'));
});
});
});
</script>
</head>
<body>
<table>
<tr>
<td>требуемый объем цемента</td>
<td><div id="slidercv" ></div><input id="slidercv-result"></td>
</tr>
<tr>
<td>компонент1</td>
<td><div id="slidercs" ></div><input id="slidercs-result"></td>
</tr>
<tr>
<td>компонент2</td>
<td><div id="slidercd" ></div><input id="slidercd-result"></td>
</tr>
</table>
</body>
</html>
|
| Часовой пояс GMT +3, время: 20:24. |