Всем доброго времени суток. Я не профи, говорю сразу, мог не заметить слона....Сижу сутки над одной проблемой. Подскажите, пожалуйста, в чем ошибка:
Сделал два слайдера, работают отлично, значения выводят какие надо. Но! Надо суммировать эти два значения, я не понимаю как это сделать.... много вариантов перепробовал, сейчас сделал таблицу для удобства: первые две ячейки - это значения двух слайдеров, третья ячейка должна их суммировать. Если прописать значения заранее, то при загрузке страницы сумма рассчитывается верно. Но если сдвинуть ползунок слайдера, то значение в одной их первых двух ячеек измениться, а сумма останется та же:
<!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>