问题描述：

我是js/jQuery的新手。原谅这个可怕的剧本。我迷路了。jQuery/js - 根据状态和数量选择选项计算税额，小计和总计

*（与全局变量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>

Div的显示信息：

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

答

一个大问题，我在这里看到的是你的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); 
});

这样，无论您需要它，它都可以使用。

更新

如在申报单没有显示内容，不使用

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

它不会为两个不同的原因有：第一：.value = ...（.val(...) jQuery中）是原生javascript，并且不会在jQuery对象中工作
秒：值是输入和选择控件的属性，您必须设置.innerText（.text() in jQuery）和.innerHTML（.html() jQuery中）

使用：

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

我按照Steve和Andrzej的建议尝试过，但是，我的所有div仍然是空白的。我已经检查了Chrome中的脚本，它正在传递。 – chasemb 2012-04-05 17:26:12

没有问题，我查看了页面的源代码，并且无处找到函数doMath（）被调用。你什么时候想更新div？关于国家的变化？ – 2012-04-05 17:54:03

我希望div的更新时a）。选择的州是爱达荷州和b）。他们将1的初始数量更改为其他值，并在屏幕上反映这些更改。就像我说的，我是js的超级新手...... :( – chasemb 2012-04-05 17:58:02

答

你的问题很可能是范围之一。

由于您在状态更改函数的闭包中声明变量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相同的上下文。）

嗯。我做了更改，但没有在屏幕上显示。所有的div都是空白的... – chasemb 2012-04-05 17:22:18

好吧，我会看到代码的其余部分 – 2012-04-05 17:28:19

我已经做了上述更新。 – chasemb 2012-04-05 17:29:47

答

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

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

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

更新

相关推荐