Не обновляется значение суммы
Всем доброго времени суток. Я не профи, говорю сразу, мог не заметить слона....Сижу сутки над одной проблемой. Подскажите, пожалуйста, в чем ошибка:
Сделал два слайдера, работают отлично, значения выводят какие надо. Но! Надо суммировать эти два значения, я не понимаю как это сделать.... много вариантов перепробовал, сейчас сделал таблицу для удобства: первые две ячейки - это значения двух слайдеров, третья ячейка должна их суммировать. Если прописать значения заранее, то при загрузке страницы сумма рассчитывается верно. Но если сдвинуть ползунок слайдера, то значение в одной их первых двух ячеек измениться, а сумма останется та же:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ion.RangeSlider - test</title>
<link rel="stylesheet" href="css/ion.rangeSlider.css" />
<link rel="stylesheet" href="css/ion.rangeSlider.skinHTML5.css" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js"></script>
<script type="text/javascript">//<![CDATA[
$(function(){
var sum = 0;
$('td[id^="result_"]').each(function(k, v){
sum += parseInt($(this).text());
if(k === $('td[id^="result_"]').length -1) $('#sum').text("sum: "+sum);
});
});//]]>
</script>
</head>
<body>
<!-- Page contents -->
<div style="position: relative; padding: 200px;">
<div >
<input type="text" id="range" value="" name="range" />
<input type="text" id="range2" value="" name="range2" />
</div>
</div>
<!-- All JS -->
<script src="js/jquery-1.11.3.min.js"></script>
<script src="js/ion.rangeSlider.js"></script>
<!-- CALC 1 ---------------------------------------------------------------------------- -->
<script>
$(document).ready(function () {
var
$range = $("#range"),
$result = $("#result_");
var track = function () {
var $this = $(this),
value = $this.prop("value");
value2 = "2";
$result.html(value*value2);
};
$range.ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50
});
$range.on("change", track);
});
</script>
<!-- CALC 1 END ---------------------------------------------------------------------------- -->
<!-- CALC 2 ---------------------------------------------------------------------------- -->
<script>
$(document).ready(function () {
var
$range2 = $("#range2"),
$result2 = $("#result_2");
var track2 = function () {
var $this = $(this),
value3 = $this.prop("value");
value4 = "3";
$result2.html(value3*value4 );
};
$range2.ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50
});
$range2.on("change", track2);
});
</script>
<!-- CALC 2 END ---------------------------------------------------------------------------- -->
<!-- RESULT ---------------------------------------------------------------------------- -->
<table border="1">
<tbody><tr>
<td id="result_"></td>
</tr>
<tr>
<td id="result_2"></td>
</tr>
<tr><td id="sum" colspan="2">sum: </td></tr>
</tbody></table>
<!-- RESULT END ---------------------------------------------------------------------------- -->
</body>
</html>
|
Пожалуйста, отформатируйте свой код!
Для этого его можно заключить в специальные теги: js/css/html и т.п., например: [js] ... ваш код... [/js] О том, как вставить в сообщение исполняемый javascript и html-код, а также о дополнительных возможностях форматирования - читайте http://javascript.ru/formatting. |
Цитата:
|
ionRangeSlider 2 ползунка сумма
markfostel,
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ion.RangeSlider - test</title>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/normalize.min.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinNice.css">
<style type="text/css">
.irs {
width: 500px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js">
</script>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td class="result"></td>
</tr>
<tr>
<td class="result"></td>
</tr>
<tr>
<td class="sum" colspan="2">sum:</td>
</tr>
</tbody>
</table>
<div style=" margin: 30px;">
<input type="text" class="range" value="" name="range"> <input type="text" class="range" value="" name="range2">
</div><script type="text/javascript">
(function($) {
$(function(){
var $range = $(".range"), $result = $(".result"), $sum = $(".sum");
function count()
{ var sum = 0;
$range.each(function(indx, element){
var num = +this.value||0;
$result.eq(indx).text(num)
sum += num
});
$sum.text("sum: " +sum)
}
$range.ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50,
onChange: count
});
count()
});
})(jQuery);
</script>
</body>
</html>
|
Спасибо огромное!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!!! Я уже был на гране срыва Сейчас буду разбираться! |
А не подскажете еще один момент?
Я пытался добиться, чтобы перед суммированием двух значений, каждое из них умножалось на определенное число. То есть формула следующая: (A*X)+(B*Y)=Summ А также, чтобы минимальное и максимальное значение, и значение по умолчанию были разными для каждого слайдера Не могу сейчас понять, как изменить Ваш код, чтобы осуществить задуманное Заранее спасибо! |
markfostel,
x = 3 , y = 7
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title>Ion.RangeSlider - test</title>
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/normalize.min.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.css">
<link rel="stylesheet" href="http://ionden.com/a/plugins/ion.rangeSlider/static/css/ion.rangeSlider.skinNice.css">
<style type="text/css">
.irs {
width: 500px;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1/jquery.min.js">
</script>
<script src="http://ionden.com/a/plugins/ion.rangeSlider/static/js/ion-rangeSlider/ion.rangeSlider.js">
</script>
</head>
<body>
<table border="1">
<tbody>
<tr>
<td class="result"></td>
</tr>
<tr>
<td class="result"></td>
</tr>
<tr>
<td class="sum" colspan="2">sum:</td>
</tr>
</tbody>
</table>
<div style=" margin: 30px;">
<input type="text" class="range" value="" name="range"> <input type="text" class="range" value="" name="range2">
</div><script type="text/javascript">
(function($) {
$(function(){
var $range = $(".range"), $result = $(".result"), $sum = $(".sum");
function count()
{ var sum = 0;
$range.each(function(indx, element){
var num = [3,7][indx] * +this.value||0;
$result.eq(indx).text(num)
sum += num
});
$sum.text("sum: " +sum)
}
$range.eq(0).ionRangeSlider({
type: "single",
min: 20,
max: 30,
from: 25,
onChange: count
});
$range.eq(1).ionRangeSlider({
type: "single",
min: 0,
max: 100,
from: 50,
onChange: count
});
count()
});
})(jQuery);
</script>
</body>
</html>
|
Потрясающе! Именно так!
Я пока плохо разбираюсь со скриптами, буду изучать данный пример, Вы мне очень помогли! Спасибо большое! |
| Часовой пояс GMT +3, время: 10:45. |