stackoom
  简体   繁体   中英

Jquery Ui slider min and max value range with if/elseif statement

 原文  2019-11-20 11:30:00  3   1    javascript/ jquery/ jquery-ui

Question

I'm attempting to make a simple payday loan calculator using jquery range slides. I have min: $500 and max: $5000 how can I display a statement when a user exceeds $2000 then I display "Only available on repeat customers"

So basically: A. If loan amount <=2000, No warning message B. If loan amount between >2000 and <=5000 and period is 3 or 5 months,then display warning message in RED as i. This loan amount is available to repeat customers only ii. This period(term) is available to repeat customers only. 

 $( 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>

1 answers

solution1
 0  2019-11-20 23:49:20

Consider the following example code. 

 $(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>

Sometimes it's better to put your functions first. Also it appears you were comparing against a value that would never be reached in Slider 1. I adjusted it and now when the amount is over 2000, the warning is shown. It will be shown after the slider is released. If you want to it appear during the slide action, move the actions to the slide callback.

暂无
暂无

The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.

Related Question Angular rzslider: max value for min & min value for max; range slider jquery range slider: set max of slider 1 to min of slider 2 html-5 range slider max and min value jQuery Range slider grep return items with min and max how to change jquery range slider min and max values in knockout? How to set min/max interval and values for jQuery UI slider? jQuery UI slider min/max values to global variable Parameterizing max value of a jQuery ui slider Jquery UI Slider incorrect max value jQuery ui slider max-value Problem
Related Tags
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM