Jquery小计函数与js-gst函数冲突

Question

O.k今天开始向前迈进1步，向后退2步。我有一个Jquery函数，它在表单中进行价格x数量=小计，然后将每个小计计算成一个总数，这一切都很好。然后，我有一个普通的js函数，它取了这个总值，添加了gst，然后又添加了一个小计，这个小计是自己创建的，并且有效。这时，当我试图将它移到gst上时，最终的total函数不起作用，我也无法从中获得任何错误代码。在这一点上，我只能假设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>

Answer 1

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

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

至

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

我还通过从HTML中删除onChange（）来更新代码，并将updatePrice（）函数的触发器添加到更改事件中。

这就是结果（我还添加了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>