Zacząłem tworzyć prosty miesięczny estymator płatności i znalazłem dziwny błąd, który zdarza się, gdy zmienam termin opcji Wybierz. Jeśli korzystasz z suwaka, miesięcznych aktualizacji płatności, a także dodaje przecinek w numerze za pomocą metody {x0}}. Ale kiedy zmienisz #loan__term, usuwa całkowicie numer. Musi być konflikt z .change() i .digits(), ponieważ jeśli go wyjmę, metodę .change() działa zgodnie z oczekiwaniami. Jakieś pomysły?

    $(document).ready(function() {
  $.fn.digits = function() {
    return this.each(function() {
      $(this).text(
        $(this)
          .text()
          .replace(/(\d)(?=(\d{3})+(?!\d))/g, "$1,")
      );
    });
  };

  function updateMonthlyPayment() {
    $loanAmount = $("#loan__amount span").html();
    $loanTerm = $("#loan__term option:selected").val();
    if ($loanTerm == "for 24 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.045878 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 36 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.032 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 48 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.025085 / 100 * 100))
        .digits();
    } else if ($loanTerm == "for 60 months") {
      $("#monthly__payment span")
        .html(Math.floor($loanAmount * 0.020963 / 100 * 100))
        .digits();
    }
  }

  $("#loan__amount__slider").slider({
    max: 125000,
    min: 5000, 
    step: 1000,
    value: 50000,
    create: function(event, ui) {
      $("#loan__amount__num")
        .position({
          my: "center bottom",
          at: "center top",
          of: ui.handle,
          offset: "0, 10"
        });
    },
    slide: function(event, ui) {
      $("#loan__amount span").html(ui.value);
      $("#loan__amount__num span").html(ui.value);
      updateMonthlyPayment();
      $("#loan__amount span").digits();
      $("#loan__amount__num span").digits();

      var delay = function() {
        var handleIndex = $(ui.handle).data("index.uiSliderHandle");
        $("#loan__amount__num")
          .position(
            {
              my: "center bottom",
              at: "center top",
              of: ui.handle,
              offset: "0, 10"
            }
          );
      };

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    }
  });

  $("#loan__term").change(updateMonthlyPayment);
});

Codepen: https://codepen.io/jrayhartley/pen/bvjdbm

0
Jason 4 czerwiec 2018, 17:57

4 odpowiedzi

Najlepsza odpowiedź

Posługiwać się

$loanAmount = parseFloat($("#loan__amount span").html().replace(',',''));

Twój $ () Aby przejść do tego, możesz usunąć "," za pomocą funkcji Wymień, a następnie analizowanie wartości.

Debugować to (miejmy nadzieję, że pomoże ci na nauce debugowania :) Po prostu użyłem instrukcji konsoli W drodze powrotnej do matematyki ... potem z powrotem do "50 000" powodujących błąd.

-2
Cody G 4 czerwiec 2018, 15:27

Problem jest tutaj:

  • Zmieniasz wybrany element na liście,
  • $("#loan__term").change(…) Połączenia {X1}},
  • $loanAmount = $("#loan__amount span").html();} - Problem

html #loan__amount span został już zmieniony za pomocą .digits(). Więc nie można wykonać obliczeń.

Dlatego, gdy komentujesz linie … .digits(), działa.

Oto roboczny kodeksu https://codepen.io/anon/pen/qxyxoq gdzie:

  • Użyłem atrybutu data, aby przechowywać wartość nie sformatowana,
  • Próbowałem uprościć inne rzeczy

Mam nadzieję, że to pomoże.

0
Takit Isy 4 czerwiec 2018, 15:49

Najbardziej problematyczną kwestią jest to, że nie oddzielasz danych z prezentacji. Umieszczenie sformatowanych wartości w rozpiętościach, a następnie czytanie wartości z powrotem z rozpiętości (zamiast stosowania zmiennych) jest bardzo zły pomysł i podatny na błędy.

Więc porównuje struny, gdy można używać wartości zamiast tego w swoim <select>. Powinieneś chwycić wartość bezpośrednio z suwaka, a wartość bezpośrednio z wybranej.

Przegenerowałem kod:

const interest = {
  "24": 0.045878,
  "36": 0.032,
  "48": 0.025085,
  "60": 0.020963
};

const loan = {
  min: 5000,
  max: 125000,
  step: 1000
};

var initialAmount = 50000;

$.fn.dollars = function() {
  return this.each(function() {
    var n = Number(this.innerHTML || this.value).toLocaleString("en-US");
    $(this).text("$" + n);
  });
};

function updateMonthlyPayment() {
  var loanAmount = $("#loan__amount__slider").slider("option", "value");
  var loanTerm = $("#loan__term").val();
  $("#monthly__payment")
    .html(Math.floor(loanAmount * interest[loanTerm]))
    .dollars();
}

$(document).ready(function() {
  $("#loan__amount, #loan__amount__num")
    .text(initialAmount)
    .dollars();
  $("#loan__min")
    .text(loan.min)
    .dollars();
  $("#loan__max")
    .text(loan.max)
    .dollars();

  $("#loan__term").change(updateMonthlyPayment);

  $("#loan__amount__slider").slider({
    max: loan.max,
    min: loan.min,
    step: loan.step,
    value: initialAmount,
    slide: function(event, ui) {
      $("#loan__amount").text(ui.value).dollars();
      $("#loan__amount__num").text(ui.value).dollars();
      updateMonthlyPayment();

      var delay = function() {
        var handleIndex = $(ui.handle).data("index.uiSliderHandle");
        $("#loan__amount__num").position({
          my: "center bottom",
          at: "center top",
          of: ui.handle,
          offset: "0, 10"
        });
      };

      // wait for the ui.handle to set its position
      setTimeout(delay, 5);
    }
  });
  updateMonthlyPayment();
});
#loan__amount__num {
  display: inline-block;
  position: relative;
}

#loan__min {
  float: left;
}

#loan__max {
  float: right;
}

#slider-box {
  background-color: #ccc;
  overflow: auto;
}
<link rel='stylesheet prefetch' href='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/themes/smoothness/jquery-ui.css'>
<script src='https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js'></script>
<script src='https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js'></script>

<h3>Financing Amount</h3>
<div id="slider-box">
  <div id="loan__amount__num" style="left: calc(37.5% - 25px);"></div>
  <div id="loan__amount__slider"></div>
  <div id="loan__min"></div>
  <div id="loan__max"></div>
</div>
<p>Amount: <span id="loan__amount"></span></p>

<h3>Estimated Monthly Payment</h3>
<div id="monthly__payment"></div>

<select id="loan__term">
  <option value="24">for 24 months</option>
  <option value="36" selected="selected">for 36 months</option>
  <option value="48">for 48 months</option>
  <option value="60">for 60 months</option>
</select>
0
Chris G 4 czerwiec 2018, 15:41