Slider UI JQUERY MIN i zakres wartości maksymalnej z oświadczeniem IF / Element

Question 1

Próbuję zrobić prosty kalkulator chwilówki za pomocą slajdów z zakresu jQuery. Mam min: 500 USD i maksimum: 5000 USD. Jak mogę wyświetlić wyciąg, gdy użytkownik przekroczy 2000 USD, a następnie wyświetlam „Dostępne tylko dla stałych klientów”

A więc w zasadzie: A. Jeśli kwota pożyczki <= 2000, brak komunikatu ostrzegawczego B. Jeśli kwota pożyczki od> 2000 do <= 5000 i okres wynosi 3 lub 5 miesięcy, wyświetl komunikat ostrzegawczy na CZERWONO jako i. Ta kwota pożyczki jest dostępna tylko dla stałych klientów ii. Ten okres (termin) jest dostępny tylko dla stałych klientów.

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

javascript jquery jquery-ui

0

Tshepo Maseko 20 listopad 2019, 14:30

Witamy w przepełnieniu stosu. Szybko, Twoje ui.value nigdy nie będzie równe 2. Ponieważ suwak min to 500, a max 5000, najniższa wartość to tylko 500 i zawsze będzie większa niż 2. Element div nigdy nie zostanie wyświetlony.

–

Twisty

21 listopad 2019, 00:33

Answer

Rozważmy następujący przykładowy kod.

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

Czasami lepiej jest umieścić swoje funkcje na pierwszym miejscu. Wygląda również na to, że porównujesz z wartością, która nigdy nie została osiągnięta w Suwaku 1. Dostosowałem ją i teraz, gdy kwota przekracza 2000, wyświetla się ostrzeżenie. Zostanie wyświetlony po zwolnieniu suwaka. Jeśli chcesz, aby pojawiła się podczas czynności na slajdzie, przenieś czynności do wywołania zwrotnego slide.

0

Twisty 21 listopad 2019, 02:49

Question 2

Rozważmy następujący przykładowy kod.

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

Czasami lepiej jest umieścić swoje funkcje na pierwszym miejscu. Wygląda również na to, że porównujesz z wartością, która nigdy nie została osiągnięta w Suwaku 1. Dostosowałem ją i teraz, gdy kwota przekracza 2000, wyświetla się ostrzeżenie. Zostanie wyświetlony po zwolnieniu suwaka. Jeśli chcesz, aby pojawiła się podczas czynności na slajdzie, przenieś czynności do wywołania zwrotnego slide.

0

Twisty 21 listopad 2019, 02:49

Slider UI JQUERY MIN i zakres wartości maksymalnej z oświadczeniem IF / Element

1 odpowiedź

Podobne pytania

Nowe pytania