如何从简单的幻灯片中获取多个数据
How to get multiple data from simple slide
我只是使用 Jquery Simple-Slider 的新手,我确实需要了解如何获取两个滑块来计算 function.Below 中两个滑块的总和是我尝试做的示例的一部分:
<div id="result"></div>
<p>Bookeeper's salary (per month)</p>
<div class="row">
<div class="col-sm-12">
<input style="padding-bottom:10px;" type="text" data-slider="true" value="0" data-slider-highlight="true" data-slider-range="0,10000" data-slider-step="1"
id="salary">
</div>
</div>
<br>
<p>Average working days (per month)</p>
<div class="row">
<div class="col-sm-12">
<input type="text" data-slider="true" value="0" data-slider-highlight="true"
data-slider-range="0,31" data-slider-step="1" id="avgdays">
</div>
</div>
<div onclick="calcTotal()">an input or a tag here</div>
-------script-------
$(document).ready(function(){
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});
-------function--------
function calcTotal(){
//get the value from slider and put it in the total variable
var total = salary value + average value;
document.getElementbyId('result').innerHTML = total;
}
因为我得到了我的答案并且可以使它对与我有同样问题的其他人有用,所以我决定回答我自己的问题而不是编辑我的问题。所以要添加到编码中,我已经制作了一个 bootstrap 模态,其中包含 div 和 id="result" 所以我只想列出脚本。
$('#salary').bind("slider:changed", function(event, data){
//get the value of id salary when slider is moved
salary = data.value;
});
$('#avgdays').bind("slider:changed", function(event, data){
//get the value of id avgdays when slider is moved
avgdays = data.value;
});
//when modal is open shoot the function
$('#myModal').on("shown.bs.modal", function(){
document.getElementById('result').innerHTML = calcTotal();
});
//declare the variable of total
var total;
//function for calculating the total
function calcTotal(){
total = salary + avgdays;
return total;
}
我只是使用 Jquery Simple-Slider 的新手,我确实需要了解如何获取两个滑块来计算 function.Below 中两个滑块的总和是我尝试做的示例的一部分:
<div id="result"></div>
<p>Bookeeper's salary (per month)</p>
<div class="row">
<div class="col-sm-12">
<input style="padding-bottom:10px;" type="text" data-slider="true" value="0" data-slider-highlight="true" data-slider-range="0,10000" data-slider-step="1"
id="salary">
</div>
</div>
<br>
<p>Average working days (per month)</p>
<div class="row">
<div class="col-sm-12">
<input type="text" data-slider="true" value="0" data-slider-highlight="true"
data-slider-range="0,31" data-slider-step="1" id="avgdays">
</div>
</div>
<div onclick="calcTotal()">an input or a tag here</div>
-------script-------
$(document).ready(function(){
$("[data-slider]")
.each(function () {
var input = $(this);
$("<span>")
.addClass("output")
.insertAfter($(this));
})
.bind("slider:ready slider:changed", function (event, data) {
$(this)
.nextAll(".output:first")
.html(data.value.toFixed(3));
});
-------function--------
function calcTotal(){
//get the value from slider and put it in the total variable
var total = salary value + average value;
document.getElementbyId('result').innerHTML = total;
}
因为我得到了我的答案并且可以使它对与我有同样问题的其他人有用,所以我决定回答我自己的问题而不是编辑我的问题。所以要添加到编码中,我已经制作了一个 bootstrap 模态,其中包含 div 和 id="result" 所以我只想列出脚本。
$('#salary').bind("slider:changed", function(event, data){
//get the value of id salary when slider is moved
salary = data.value;
});
$('#avgdays').bind("slider:changed", function(event, data){
//get the value of id avgdays when slider is moved
avgdays = data.value;
});
//when modal is open shoot the function
$('#myModal').on("shown.bs.modal", function(){
document.getElementById('result').innerHTML = calcTotal();
});
//declare the variable of total
var total;
//function for calculating the total
function calcTotal(){
total = salary + avgdays;
return total;
}