Question

O.k今天开始向前迈出一步，退步两步。我有一个Jquery函数，它在表单中执行价格x qty =小计，然后将每个小计计算为总计，这一切都很好，花花公子。然后我有一个普通的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>

Answer 1

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

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>

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

1 个答案: