时间戳

首页 > 解决方案 > 带有 if/elseif 语句的 Jquery Ui 滑块最小值和最大值范围

javascript - 带有 if/elseif 语句的 Jquery Ui 滑块最小值和最大值范围

问题描述

我正在尝试使用 jquery range 幻灯片制作一个简单的发薪日贷款计算器。我有最低：500 美元和最高：5000 美元当用户超过 2000 美元时如何显示声明然后我显示“仅适用于回头客”

所以基本上： A. 如果贷款金额 <=2000，没有警告信息 B. 如果贷款金额在 >2000 和 <=5000 之间且期限为 3 或 5 个月，则以红色显示警告信息为 i。此贷款金额仅适用于回头客 ii。此期间（期限）仅适用于回头客。

$( document ).ready(function() {
function update() {            
     $interest = 0.3 ;
     $perday = 15 ;
     $amount1 = $("#amount").val();
     $dayscount = $("#days").val();
     $amount2 = parseInt($amount1) + $interest * parseInt($amount1) + (parseInt($dayscount) * ($perday/100));
     $apr = (($amount2-$amount1 / $amount1 ) / ((parseInt($dayscount)/365) * 10000))  ;
     $("#amount2").val($amount2);
     $("#amount3").val(parseFloat($amount2-$amount1).toFixed(2));
     $("#amount4").val($apr);
}
 
debugger;
 
$("#slider1").slider({
    max:5000,
    min:500,
    step:10,
    slide: function(event, ui) {  
 
        $("#amount").val(ui.value);
                update();
       
    }, 
        change: function (event, ui) {
            if (ui.value == 2) {
                $("#mindiv").show();
            } else {
                $("#mindiv").hide();
            }
        }
});
 
       
     
function addDaysToDate(days) {
  var mths = new Array("Jan", "Feb", "Mar",
    "Apr", "May", "Jun", "Jul", "Aug", "Sep",
    "Oct", "Nov", "Dec");
 
  var d = new Date();
  d.setHours(d.getHours() + (24 * days));
 
  var currD = d.getDate();
  var currM = d.getMonth();
  var currY = d.getFullYear();
 
  return mths[currM] + " " + currD + ", " + currY;
}
 
 
 
$("#slider2").slider({
    max:30,
    min:1,
 
    slide: function(event, ui) {  
 
        $("#days").val(ui.value);
        $("#date").text(addDaysToDate(parseInt($("#days").val())));
                update();
    },
    create: function(event, ui) {
      $("#date").text(addDaysToDate(parseInt($("#days").val())));
    }    
});
 
$("#days").val($("#slider2").slider("value"));
 
$("#days").change(function(event) {
  var data = $("#days").val();
  if (data.length > 0)
  {
     if (parseInt(data) >= 0 && parseInt(data) <= 31)
    {
        $("#slider2").slider("option", "value", data);
     }
     else
     {
        if (parseInt(data) < 1)
       {
           $("#days").val("1");
           $("#slider2").slider("option", "value", "1");
       }
       if (parseInt(data) > 31)
        {
            $("#days").val("31");
            $("#slider2").slider("option", "value", "31");
        }
     }
  }
  else
  {
    $("#slider2").slider("option", "value", "1");
  }
  $("#date").text(addDaysToDate(parseInt($("#days").val())));
});
 
update();
});
<!DOCTYPE html>
<html lang="en" >

<head>
  <meta charset="UTF-8">
  <title>Loan Calculator with  two jquery  slider inputs </title>
  
  
  <link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'>

      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>

  Loan Amount<div id="slider1"></div>
Your Loan <input type="text" id="amount" value="500"/><br /><br />

hhhh<div id="mindiv">asds</div>
 
Loan Length<div id="slider2"></div>
 
 
Days Loaned <input type="text" id="days" value="1"/><br /><br />
Repayment Date<br />
<div id="date"></div><br />
Your Loan
<input id="amount2" type="text" />
Interest
<input id="amount3" type="text" /><br />
APR
<input id="amount4" type="text" /><br />



  <script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

  

    <script  src="js/index.js"></script>




</body>

</html>

标签： javascriptjqueryjquery-ui

解决方案

考虑以下示例代码。

$(function() {
  function update() {
    $interest = 0.3;
    $perday = 15;

    $amount1 = parseInt($("#amount").val());
    $dayscount = parseInt($("#days").val());
    $amount2 = $amount1 + $interest * $amount1 + ($dayscount * ($perday / 100));
    $apr = (($amount2 - $amount1 / $amount1) / (($dayscount / 365) * 10000));
    $("#amount2").val($amount2);
    $("#amount3").val(parseFloat($amount2 - $amount1).toFixed(2));
    $("#amount4").val($apr);
    return [$amount1, $dayscount, $amount2, parseFloat($amount2 - $amount1).toFixed(2), $apr];
  }
  
  function addDaysToDate(days) {
    var d = new Date();
    d.setHours(d.getHours() + (24 * days));

    var cStr = $.datepicker.formatDate("M d, yy", d);

    return cStr;
  }

  debugger;

  $("#slider1").slider({
    max: 5000,
    min: 500,
    step: 10,
    slide: function(event, ui) {
      $("#amount").val(ui.value);
      console.log(update());
    },
    change: function(event, ui) {
      if (ui.value >= 2000) {
        $("#mindiv").show();
      } else {
        $("#mindiv").hide();
      }
    }
  });

  $("#slider2").slider({
    max: 30,
    min: 1,
    slide: function(event, ui) {
      $("#days").val(ui.value);
      $("#date").text(addDaysToDate(parseInt($("#days").val())));
      update();
    },
    create: function(event, ui) {
      $("#date").text(addDaysToDate(parseInt($("#days").val())));
    }
  });

  $("#days").val($("#slider2").slider("value"));

  $("#days").change(function(event) {
    var data = $("#days").val();
    if (data.length > 0) {
      if (parseInt(data) >= 0 && parseInt(data) <= 31) {
        $("#slider2").slider("option", "value", data);
      } else {
        if (parseInt(data) < 1) {
          $("#days").val("1");
          $("#slider2").slider("option", "value", "1");
        }
        if (parseInt(data) > 31) {
          $("#days").val("31");
          $("#slider2").slider("option", "value", "31");
        }
      }
    } else {
      $("#slider2").slider("option", "value", "1");
    }
    $("#date").text(addDaysToDate(parseInt($("#days").val())));
  });

  update();
});
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css'>
<link rel='stylesheet prefetch' href='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/css/bootstrap.min.css'> Loan Amount
<div id="slider1"></div>
Your Loan <input type="text" id="amount" value="500" /><br /><br /> hhhh
<div id="mindiv" style="display: none; background: red;">asds</div>
Loan Length
<div id="slider2"></div>
Days Loaned <input type="text" id="days" value="1" /><br /><br /> Repayment Date<br />
<div id="date"></div><br /> Your Loan
<input id="amount2" type="text" /> Interest
<input id="amount3" type="text" /><br /> APR
<input id="amount4" type="text" /><br />

<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src='https://cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/3.3.7/js/bootstrap.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

有时最好把你的功能放在第一位。此外，您似乎正在与滑块 1 中永远无法达到的值进行比较。我对其进行了调整，现在当金额超过 2000 时，会显示警告。释放滑块后会显示。如果您希望它在滑动操作期间出现，请将操作移至slide回调。

推荐阅读