jQuery获取两个不同滑块的值并执行计算

jquery getting value of two different sliders and perform a calculation

本文关键字：计算 执行 获取 两个 jQuery      更新时间：2023-09-26

我有两个滑块，它们有自己的值和属性：https://i.stack.imgur.com/3OZqr.gif

我正在尝试做的是获取这两个滑块的值并执行将显示在兴趣标签旁边的计算。计算公式为：磅*0,008*天。

对于混乱的代码，我深表歉意，因为我仍然是初学者。

.HTML 

<div class="section">
  <p>
    <label for="amount1">£</label>
    <input type="text" id="amount1" />
  </p>
  <div id="Slider1"></div>
  <p>
    <label for="amount2">Days</label>
    <input type="text" id="amount2" />
  </p>
  <div id="Slider2"></div>
  <p>
    <label for="borrow">Borrowing</label>
    <input type="text" id="borrow">
    <label for="interests">+ Interest</label>
    <input type="text" id="interests">
  </p>
  <button onClick="totalinterest()">Try</button>
  <p id="interests"></p>
</div>

.JS

$(function getslider1(pounds) {
  $("#Slider1").slider({
    max: 400,
    min: 50,
    value: 200,
    range: false,
    slide: function(event, ui) {
      var pounds = $("#amount1").val(ui.value);
      $("#borrow").val(ui.value);
      return pounds;
    }
  });
  document.getElementById("amount1").textContent;
});
$(function getslider2(days) {
  $("#Slider2").slider({
    max: 30,
    min: 1,
    value: 30,
    range: false,
    slide: function(event, ui) {
      var days = $("#amount2").val(ui.value);
      //("#interests").val(ui.value);
      return days;
    }
  });
  document.getElementById("amount2").textContent;
});
$(function totalinterest() {
  var int = (getslider1 * 0.008);
  var tint = (int * getslider2);
  //$("#interests").val(tinterest);
  var total = tint.valueOf();
  document.getElementById("interests").innerHTML = total;
});
嗨，

我的朋友。

没有按钮 使用这个和兴趣的价值自动做计算

$('#Slider1').mouseup(function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
    }, function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
});

$('#Slider2').mouseup(function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
    }, function(){
    var pounds = $( "#Slider1" ).slider( "option", "value" );
var days = $( "#Slider2" ).slider( "option", "value" );
var total= pounds*0.008*days;
      document.getElementById("interests").value = total;
});

如果你想使用按钮试试这个

"网页"按钮

<button id="btntot">Try</button>

.JS

$('#btntot').click(function(){
    var pounds = $("#amount1").val();
  var days = $("#amount2").val();
  var total = pounds*0.008*days;
  document.getElementById("interests").value = total;
});
相关文章：