Question

我有两个输入字段-捐赠和小费字段。更改捐赠字段时，我需要将提示字段设置为等于捐赠字段的5％。而且我需要确保两个字段的总和不小于1美元。

我有这个，但是不能正常工作：

$('#donationAmount').change(function() {
    var donationAmount = $('#donationAmount');
    var tipAmount = $('#tipAmount');

    if(parseFloat(tipAmount.val()) <= 1){
        tipAmount.val(1);
    }else{
        tipAmount.val(parseFloat(donationAmount.val()*0.05).toFixed(2));
    }

    if(parseFloat(donationAmount.val()) < 1){
        donationAmount.val(1);
    }
});

Answer 1

在计算捐赠金额的5％之后（而不是之前）检查小费金额（看看是否至少为$ 1）。

提示必须至少是捐赠的5％：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Donation Amount:
<input type="number" id="donationAmount"/><p/>
Tip Amount:
<input type="number" id="tipAmount"/>
<script>
$('#donationAmount').change(function() {
    var donationAmount = $('#donationAmount');
    var tipAmount = $('#tipAmount');
    var donation = parseFloat(donationAmount.val());
    var tip = parseFloat(tipAmount.val());
    if(donation<1){
      donation = 1;
      donationAmount.val(1);
    }
    if(tip/donation<0.05){
     tipAmount.val((donation*0.05).toFixed(2));
    }
    if(tipAmount.val()<1){
     tipAmount.val(1);
    }
});
</script>

提示必须正好是捐赠的5％：

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
Donation Amount:
<input type="number" id="donationAmount"/><p/>
Tip Amount:
<input type="number" id="tipAmount"/>
<script>
$('#donationAmount').change(function() {
    var donationAmount = $('#donationAmount');
    var tipAmount = $('#tipAmount');
    var donation = parseFloat(donationAmount.val());
    var tip = parseFloat(tipAmount.val());
    if(donation<1){
      donation = 1;
      donationAmount.val(1);
    }
    if(tip/donation!=0.05){
     tipAmount.val((donation*0.05).toFixed(2));
    }
    if(tipAmount.val()<1){
     tipAmount.val(1);
    }
});
</script>

Answer 2

您的条件：

提示必须是捐款的5％
两者都必须大于等于1.00

您需要将两个值比较为“最小值”。第一个是用户输入的值，第二个是计算结果。

为了缩短代码并使它更易于阅读，我使用了一些ternary operator而不是if / else语句。

以下是按顺序进行的步骤（这是造成问题的主要原因）：

获取输入。
检查是否大于minimum来设置donation。
执行5％的math
检查math是否大于minimum来设置tip。

比较了两个值，并可能用最小值代替了。

将两个正确的值发送到输入元素。

$('#donationAmount').change(function(){
  var minimum = 1.00;
  var donation_input = parseFloat($(this).val());
  var donation = (donation_input<minimum) ? minimum : donation_input;
  
  var math = donation*0.05;
  var tip = (math<minimum) ? minimum : math;

  $(this).val(donation.toFixed(2));
  $("#tipAmount").val(tip.toFixed(2));

});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

Donation: <input type="text" id="donationAmount"><br>
Tip: <input type="text" id="tipAmount">

Answer 3

下面的代码应获取捐赠金额，如果捐赠金额低于1.00美元，则将其设置为1.00美元，然后计算小费率为5％；如果捐赠金额低于1.00美元，则将其设置为1.00美元，并重新填充两个字段。由于字段可以通过多种方式更改为任意值，因此我也建议在后端进行验证。

$('#donationAmount').on('change', function(){ 
  var $donationAmount = $(this);
  var $tipAmount = $('#tipAmount');

  var donation = Number($donationAmount.val());
  var tip;

  donation = (donation >= minimum)? donation:1;
  tip = (donation*0.05 >= minimum)? donation*0.05:1;

  $donationAmount.val( donation.toFixed(2) );
  $tipAmount.val( tip.toFixed(2) );
});

jQuery-设置一个输入等于另一个输入的5％，然后再输入1

3 个答案: