Jquery简单实时计算器

Question

我有一个非常简单的表单，其中客户添加：

1. 计算文档>>>中的字符数，然后计算标准化页面(NP) (Chars / 1800)
2. 检查他是否想为更快的解决方案买单
3. 检查他是否要改正语法

价格应按以下方式计算：

• 小于50 NP = 599；每个+10 NP = 99
• 更快的解决方案= +399
• 语法修正= 39 / NS (如果解速度更快，则为79 / NS)

应该实时计算。我有一个表格：

<form action="" id="kalkulackaceny" onsubmit="return false;">

    <label>Number of Chars<input type="text" name="kyber-znaky"id="kyber-znaky"/><span id="totalNS"></span></label> 
    <label><input type="checkbox" name="kyber-specha" id="kyber-specha" val="yes"/> Spěchá to?</label>
    <label><input type="checkbox"  name="kyber-korektura" id="kyber-korektura" val="yes"//> Korektura?</label>

</form>
<div id="totalPrice"></div>

并且不更新jquery：

var cenaStd = 599;
var cenaDeset = 99;
var cenaSpechato = 399;
var cenaKorektura = 39;
var cenaKorekturaSpechato = 79;

$(document).ready(function(){

    //update znaky
    $('#kyber-znaky').keyup(function(){
        var ns = $('#kyber-znaky').val();
        ns = Math.round(ns/1800);

        if (ns < 50){
            finalPrice = cenaStd;
        }
        else {
            finalPrice = cenaStd;
            x = ns - 49;
            while (x > 0){
                finalPrice += cenaDeset;
                x -= 10;
            }
        }

        $('#totalNS').text(" (celkem " +ns+ " NS)");
        //$('#totalPrice').text("Celková cena za zakázku " +finalPrice);

    });

    $('#kyber-specha').change(function() {        
        if($('#kyber-specha:checked').val() == 'yes'){
            finalPrice += cenaSpechato;
        }               
    });
    $('#kyber-korektura').change(function() {
    if($('#kyber-specha:checked').val() == 'yes'){    
        if($('#kyber-specha:checked').val() == 'yes'){
            finalPrice += ns*cenaKorekturaSpechato;
        }
        else {
            finalPrice += ns*cenaKorektura;
        }
    }
    });

    $('#kalkulackaceny').on('change',function(){
        $('#totalPrice').text("Celková cena za zakázku " +finalPrice);
    });

});

我已经将它添加到js fiddle：这里中。

有人能帮我修好吗？我是jquery的初学者。提前感谢！

Answer 1

我已经将所有计算转移到单独的函数：calcPrice。我还将Math.round(ns / 1800)改为Math.ceil(ns / 1800)。如果您真的想从计算中排除半填充页，请将其更改回。

​

var cenaStd = 599;
var cenaDeset = 99;
var cenaSpechato = 399;
var cenaKorektura = 39;
var cenaKorekturaSpechato = 79;

var calcPrice = function(sett) {
  var pages = sett.pages >= 0 ? sett.pages : 0,
    correct = sett.correct,
    fast = sett.fast,
    totalPrice,
    tensOver50 = Math.ceil(Math.max(0, pages - 49) / 10);

  totalPrice = cenaStd + tensOver50 * cenaDeset;
  if (fast) {
    totalPrice += cenaSpechato;
  }
  if (correct) {
    totalPrice += pages * (fast ? cenaKorekturaSpechato : cenaKorektura)
  }
  return totalPrice;
}


$(document).ready(function() {

  var paramsChanged = function() {
    var ns = parseInt($('#kyber-znaky').val());
    ns = Math.ceil(ns / 1800);

    var settings = {
      fast: $('#kyber-specha:checked').length === 1,
      correct: $('#kyber-korektura:checked').length === 1,
      pages: ns
    };
    var finalPrice = calcPrice(settings);

    //update display:
    $('#totalNS').text(" (celkem " + ns + " NS)");
    $('#totalPrice').text("Celková cena za zakázku " + finalPrice);
  }

  //update znaky
  $('#kyber-znaky').keyup(paramsChanged);
  $('#kyber-specha, #kyber-korektura').change(paramsChanged);

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form action="" id="kalkulackaceny" onsubmit="return false;">

  <label>Number of Chars
    <input type="text" name="kyber-znaky" id="kyber-znaky" /><span id="totalNS"></span>
  </label>
  <br />
  <label>
    <input type="checkbox" name="kyber-specha" id="kyber-specha" val="yes" />Spěchá to?</label>
  <label>
    <input type="checkbox" name="kyber-korektura" id="kyber-korektura" val="yes" //>Korektura?</label>

</form>
<div id="totalPrice"></div>

​