更新

Question

我是js / jQuery的新手。原谅这个可怕的剧本。我输了。

*（根据建议使用全局变量ifTaxRate更新。）*

我正在尝试根据客户选择的状态和订购数量计算税金，小计和总额，并在屏幕上动态显示。

如果客户来自爱达荷州，我正在尝试申请6％的销售税率。

选择选项：

 <select id="state" value="<?php echo $_SESSION['sstate'] ?>" name="state" class="required" >
   <option value="">Select State</option>
   <option value="AK">Alaska</option>
   .
   <option value="ID">Idaho</option>
   .
   .
   <option value="WY">Wyoming</option>
</select>

<select id="orderquantity" name="orderquantity">
   <option value="1">1 Bottle (30 Day Supply)</option>
   .
   .
   <option value="8">8 Bottles (240 Day Supply)</option>
</select>

Divs显示信息：

<div class="quantityselected"></div>
<div class="productprice"></div>
<div class="pricequantity"></div>
<div class="subtotal"></div>
<div class="tax"></div>
<div class="shipping"></div>
<div class="total"></div>

非常糟糕的js尝试：

<script type="text/javascript">
      var ifTaxRate;
      $(document).ready(function() {
          $("#state").change(function() {
            if ($(this).val() == 'ID') {
              ifTaxRate = .06;
            } else {
              ifTaxRate = 0;
            }
          });
        });

      function doMath() {
            var quant = parseInt(document.getElementById('orderquantity').value);
            //change price here
            var price = 69.99;
            var tax = ifTaxRate;
            //change flat shipping cost here
            var shipping = 4.99;
            var subtotal = quant * price;
            var taxtotal = tax * subtotal;
            var total = subtotal + tax;

            $('.quantityselected').value = quant;
            $('.productprice').value = price;
            $('.pricequantity').value = subtotal;
            $('.tax').value = taxtotal;
            $('.shipping').value = shipping;
            $('.total').value = shipping;
        }
</script>

Answer 1

我在这里看到的一个大问题是你的iftax变量是在$('state').change();上作为参数传递的匿名函数的范围内声明的你必须将它声明为一个全局变量，而不是在所述函数中重新声明它：

var ifTaxRate = 0; //new    
$(document).ready(function() {
   $("#state").change(function() {
      if ($(this).val() == 'ID') {
         ifTaxRate = .06;
      } else {
         ifTaxRate = 0;
      }
      doMath();//new
   });
   //this way every time you change a select box value, doMath() is called
   $('select').change(doMath);
});

通过这种方式，无论您需要它都可以访问...

更新

对于未在div中显示的内容，请勿使用

$('.quantityselected').value = quant;

由于两个不同的原因，它不起作用：第一个：.value = ...（jQuery中的.val(...)）是本机javascript，不能在jQuery对象中工作
第二：value是输入和选择控件的属性，你需要设置.innerText（jQuery中为.text()）和.innerHTML（jQuery中为.html()）

使用：

$('.quantityselected').html(quant);
...

Answer 2

您的问题可能属于范围。

由于您在状态更改函数的闭包中声明变量iftax，因此您的doMath方法无法看到它。

在内部你应该在顶层声明变量，然后仅从状态变化函数分配：

<script type="text/javascript">
  var iftax;

  $(document).ready(function() {
      $("#state").change(function() {
        if ($(this).val() == 'ID') {
          iftax = .06;
        } else {
          iftax = 0;
        }
      });
    });

    // rest as before

（在一个完全不同的主题上，调用变量ifTaxRate或类似的东西会使恕我直言更清楚，因为目前我认为它可能会与税款的金额相混淆，尤其是当使用与price和shipping相同的上下文时。）

Answer 3

文档就绪函数中声明的变量“iftax”是该函数的本地变量。 doMath函数中引用的iftax将查看全局范围（window.iftax），我猜这是未定义的。

尽管使用全局变量有点反模式，但如果从文档就绪函数中的所有位置删除“var”（当前它写为“var iftax”），它将默认为全局变量变量和你的代码应该有效。

jQuery / js - 根据状态和数量选择选项计算税额，小计和总计

3 个答案:

更新