问Jquery subtotal函数与js gst函数冲突
EN

Stack Overflow用户

提问于 2016-04-19 14:51:37

回答 1查看 121关注 0票数 0

好的，今天开始是前进一步，后退两步。我有一个Jquery函数，它在表单中计算价格x qty = subtotal，然后将每个小计计算成一个总数，这很好用。然后，我有一个普通的js函数，它获取这个合计值，并添加gst，然后再加上一个小计数字，这个数字是自己创建的，可以工作，然后在这一点上，当我试图将其移动到gst上时，最终的总函数将不起作用，我也无法从中获得任何错误代码。在这一点上，我只能假设js脚本不能与Jquery脚本对话，或者确实出了什么问题。

// Jquery script
<script type="text/javascript">
    jQuery(function($) {  
    $(".qty, .tradeprice").change(function() {
        var total = 0;
        $(".qty").each(function() {
            var $qty = $(this),
                $row = $qty.closest('tr'),
                $tradePrice = $row.find('.tradeprice'),
                $subtotal = $row.find('.subtotal');
            subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
            total += subtotal;
            $subtotal.val(subtotal);
        });
        $('.total').val(total);
    }).change();
    });
</script>


// JS script
<script type="text/javascript">
    function updatePrice() {
          // Get the ex-GST price from its form element
    var exPrice = document.getElementById("ex-gst").value;
    var gstPrice = document.getElementById("gst").value;

    // Get the GST price
    gstPrice = exPrice * 0.1;
    var TPrice = parseInt(gstPrice) + parseInt(exPrice);

    // Set the GST price in its form element
    document.getElementById("gst").value = gstPrice;
    document.getElementById("inc-gst").value = TPrice;

    }
</script>

// bottom of HTML
<form>
    <table>
        <tr>
            <th><input type='text' name='po101' id='po101'/></th>
            <td><input name='po102' type='text' id="po102"/></td>
            <td><input name='po103' type='text' id="po103" /></td>
            <td>$<input name='po104' type="text" class='tradeprice' id="po104" value="0" /></td>
            <th><input name='po105' type="text" class='qty' id="po105" value="0" /></th>
            <td><input name='po106' type='text' class='subtotal' id="po106" readonly="true" /></td>
        </tr>
        <tr>
            <th height='24' colspan="7">Total:<input type='text' id='Total' name='Total' class='total' readonly="true" onChange="updatePrice()"/></th>
        </tr>
        <tr>
            <th height='24' colspan="7"><div id='submit'><input type='submit' /></div></th>
        </tr>
        <tr>
            <th height='24' colspan="7">
            <input type='text' id="gst" name='gst' onChange="updatePrice()" />
            <input type='text' id="inc-gst" name='inc-gst' onChange="updatePrice(this.form)"/>
            </th>
        </tr>
    </table>
</form>

javascript

jquery

回答 1

Stack Overflow用户

发布于 2016-04-19 16:25:30

我现在已经编辑了您的代码，并更改了这一行

var exPrice = document.getElementById("ex-gst").value;

至

var exPrice = document.getElementById("Total").value;

我还更新了代码，从HTML中删除了onChange()，并将updatePrice()函数的触发器添加到了change事件中。

然后这就是结果(我还添加了jQuery版本作为注释，两者都可以工作)。

jQuery(function($) {
      $(".qty, .tradeprice").change(function() {
        var total = 0;
        $(".qty").each(function() {
          var $qty = $(this),
            $row = $qty.closest('tr'),
            $tradePrice = $row.find('.tradeprice'),
            $subtotal = $row.find('.subtotal');
          subtotal = parseInt($qty.val(), 10) * parseFloat($tradePrice.val());
          total += subtotal;
          $subtotal.val(subtotal);
        });
        $('.total').val(total);
        updatePrice();
      }).change();
    });

    function updatePrice() {
      // Get the ex-GST price from its form element
      var exPrice = document.getElementById("Total").value;
      //var exPrice = $('#Total').val() //this is jQuery
      var gstPrice = document.getElementById("gst").value;
      //var exPrice = $('#gst').val() //this is jQuery

      // Get the GST price
      gstPrice = exPrice * 0.1;
      var TPrice = parseInt(gstPrice) + parseInt(exPrice);

      // Set the GST price in its form element
      document.getElementById("gst").value = gstPrice;
      //$('#gst').val(gstPrice) //this is jQuery
      document.getElementById("inc-gst").value = TPrice;
      //$('#inc-gst').val(TPrice) //this is jQuery

    }

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<form>
  <table>
    <tr>
      <th>
        <input type='text' name='po101' id='po101' />
      </th>
      <td>
        <input name='po102' type='text' id="po102" />
      </td>
      <td>
        <input name='po103' type='text' id="po103" />
      </td>
      <td>$
        <input name='po104' type="text" class='tradeprice' id="po104" value="0" />
      </td>
      <th>
        <input name='po105' type="text" class='qty' id="po105" value="0" />
      </th>
      <td>
        <input name='po106' type='text' class='subtotal' id="po106" readonly="true" />
      </td>
    </tr>
    <tr>
      <th height='24' colspan="7">Total:
        <input type='text' id='Total' name='Total' class='total' readonly="true" />
      </th>
    </tr>
    <tr>
      <th height='24' colspan="7">
        <div id='submit'>
          <input type='submit' />
        </div>
      </th>
    </tr>
    <tr>
      <th height='24' colspan="7">
        <input type='text' id="gst" name='gst' />
        <input type='text' id="inc-gst" name='inc-gst' />
      </th>
    </tr>
  </table>
</form>

票数 0

页面原文内容由Stack Overflow提供。腾讯云小微IT领域专用引擎提供翻译支持

原文链接：

https://stackoverflow.com/questions/36710608

复制

相似问题

问Jquery subtotal函数与js gst函数冲突
EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery subtotal函数与js gst函数冲突EN

回答 1

Stack Overflow用户

社区

活动

圈层

关于

腾讯云开发者

热门产品

热门推荐

更多推荐

问Jquery subtotal函数与js gst函数冲突
EN