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

时间:2017-11-03 09:16:47

标签: javascript jquery

这个国家正在改变航运。我可以提醒我的运费,但会拒绝在我的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>

3 个答案:

答案 0 :(得分:0)

您的代码应该可以正常运行,但您可以在代码中改进一些内容:

  • 不是在每个条件中声明shipping变量3次,而是只需要声明一次,然后在每个条件下更新它,并确保它作为字符串存储,以便可以显示正确地在您的HTML中。
  • 不是在每种情况下都更新span的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);
});

<强>演示:

&#13;
&#13;
$('#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);
});
&#13;
<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>
&#13;
&#13;
&#13;

答案 1 :(得分:0)

我可以在您的代码中看到错误。我在“$('.add').click”中找到了“$('#country').change”。另外“$('#country').change”函数你声明了局部变量“var shipping;”,这就是为什么全局“shipping;”值没有变化但你在“$('#country').change”函数中使用它的原因。我修改了一点现在尝试使用以下代码和评论回复,如果不适合你:

var price= "";
var userprice="";
var flpay='';
var total='';
var shipping='';
var fees=30.0;

$('#country').change(function() {
var input = $(this).val();
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);

})

答案 2 :(得分:0)

我只将div #usashipping更改为其他内容,而且效果很好。也许#usashipping现在是jquery库中的常量。