如何从简单幻灯片中获取多个数据

时间:2016-09-13 11:07:10

标签: jquery slider

我只是使用Jquery Simple-Slider的初学者,我确实需要知道如何获得两个滑块来计算函数中两者的总和。下面是示例I的一部分尝试过:

<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;
}

1 个答案:

答案 0 :(得分:0)

当我得到我的答案并且可能使其对与我有同样问题的其他人有用时所以我决定回答我自己的问题而不是编辑我的问题。所以为了增加编码,我已经制作了一个bootstrap模式,其中包含id =&#34;结果&#34;所以我只是要列出脚本。

$('#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;
}