javascript - 我的变量拒绝在我的 Div 中显示

Question

国家正在随着航运而变化。我可以提醒我的运输，但会拒绝在我的 div 中显示。可能出什么问题了？除 #usashipping 之外，所有计算均运行良好且显示良好，请提供帮助。我的国家发生变化并给出正确的计算值。运费不会显示。

<!-- language: lang-js -->

<script type="application/javascript">
var price= "";
var userprice="";
var flpay='';
var total='';
var shipping='';
var fees=30.0;

$('#country').change(function() {
var input = $(this).val();
var shipping;
if (input == 40) {
shipping = 10.0;
  $('#usashipping').html('10.0');

} else if (input == 236) {
shipping = 10.0;
  $('#usashipping').html('10.0');

} else {
shipping = 30.0;
  $('#usashipping').html('30.0');

}
if(fees=='') {
$('#fees').html(30); 
}
if(flpay=='')
 {
 $('#flpay').html(2*19.99); 
 }
 if(total=='')
 {
 var tot=19.99*2.0 +30.0 + shipping;
 var total= tot.toFixed(2);
  $('#total').html(total); 

   }
   $('.add').click(function() { 
    var $input = $(this).next();
    var currentValue = parseInt($input.val());

    var newinput= currentValue + 1;
    $('#gems').val(newinput);

    (newinput);
    if(newinput==1)
    {
     var np1=(19.99*2.0);
     flpay= np1.toFixed(2);
     $('#flpay').html(flpay);

     var tot= (fees + shipping + flpay);
     var total= tot.toFixed(2);
     $('#total').html(total);

    var newp=19.99;
    var price= newp.toFixed(2);
     $('#price').html(price); 
     useprice= 19.99;  
     }

    else if(newinput>1) 
     {
     //useprice=useprice;
    var newprice= 19.99 + (9.99*(newinput-1));
    var np1 =(2*newprice);
    var flpay = np1.toFixed(2);

    $('#flpay').html(flpay); 
    var tot =( fees + shipping + (2*newprice) );
    var total= tot.toFixed(2);
    $('#usashipping').html(shipping);       
    $('#total').html(total);
    var newp= newprice.toFixed(2);
    $('#price').html(newp);    
    }
    // newprice= price * 2;
    // $('#price').html(newprice);

    });


  <!-- language: lang-html -->
     <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
     </script>

      <div>
        First &amp; Last Months Payment = $<span data-first-last-month-fees="" id="flpay"></span>
      </div>
      <div>
        Shipping Fee = $<span data-shipping-fee="" id="usashipping"></span>
      </div>
      <div>
        Total due today : $<span data-total-due="" id="total"></span>
      </div>

Answer 1

您的代码应该可以完美运行，但是您的代码中有一些需要改进的地方:

• 您不需要在每个条件下声明 shipping 变量 3 次，而只需声明一次，然后在每个条件下更新它，并确保它存储为字符串，以便可以正确显示在您的 HTML 中。
• 无需在每种情况下更新 span 的 HTML 内容，只需使用最后的运费 金额进行更新即可。

这就是您的代码:

$('#country').change(function() {
  var input = $(this).val();
  var shipping;
  if (input == 40) {
    shipping = '10.0';
  } else if (input == 236) {
    shipping = '20.0';
  } else {
    shipping = '30.0';
  }
  $('#usashipping').html(shipping);
});

演示:

$('#country').change(function() {
  var input = $(this).val();
  var shipping;
  if (input == 40) {
    shipping = '10.0';
  } else if (input == 236) {
    shipping = '20.0';
  } else {
    shipping = '30.0';
  }
  $('#usashipping').html(shipping);
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<select id="country">
<option value="40">40</option>
<option value="236">236</option>
<option value="100">100</option>

</select>
<div>
  Shipping Fee = $<span data-shipping-fee="" id="usashipping"></span>
</div>