【问题标题】：jQuery / js - Calculate tax, subtotal and total based on state and quantity select optionsjQuery / js - 根据州和数量选择选项计算税款、小计和总计
【发布时间】：2012-04-05 17:12:37
【问题描述】：

我是 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>

【问题讨论】：

标签： javascript jquery html shopping-cart

【解决方案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 是 input 和 select 控件的一个属性，对于 div，你必须设置.innerText（jQuery 中为.text()）和.innerHTML（jQuery 中为.html()）

使用：

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

【讨论】：

我已经按照 Steve 和 Andrzej 的建议进行了尝试，但是，我所有的 div 仍然是空白的。我已经检查了 chrome 中的脚本，它正在通过。
没有问题，我查看了页面的源代码，但在任何地方都找不到函数 doMath() 被调用。什么时候更新 div？改变状态？
我希望 div 在 a) 时更新。选择的州是爱达荷州和 b)。他们将初始数量 1 更改为其他值，并将这些更改反映在屏幕上。就像我说的，我对 js 很陌生... :(
好的，所以你要做的就是在每次发生这种情况时调用 doMath() ；我更新我的代码
您的 javascript 有错误。消除 ' }）; ' 在我添加的行之前

【解决方案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 或类似的变量会更清楚，因为目前我认为它可能与应缴税款 amount 混淆，尤其是在使用时与price 和shipping 的上下文相同。）

【讨论】：

嗯。我已经进行了更改，但屏幕上没有显示任何内容。所有的 div 都是空白的...

【解决方案3】：

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

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

【讨论】：