Jquery计算问题(返回NaN)

Jquery calculation issue (returning NaN)

本文关键字：NaN 返回 计算 问题 Jquery      更新时间：2023-09-26

我有一个表单，其中某些计算是根据下拉菜单选择的。一切都很好，除了当我从下拉价格/单位字段中选择一个值时，必须通过计算(total1/qty)来填充，这是返回NaN。请帮忙解决这个问题。我的标记如下:

 <html>
 <head>
 <title>Dept</title>
   <script type='text/javascript' src='http://code.jquery.com/jquery-1.10.1.js'></script>
 <script type='text/javascript'>//<![CDATA[
 $(window).load(function(){
 $(document).ready(function(){
  $("select").on('change',function () {
    var dept_number = $(this).val();
    var price = $(this).find(':selected').data('price');
 $(this).closest('table').find('.deptip').val(dept_number);
 $(this).closest('table').find('.priceip').val(price);
 $(this).closest('table').find('.total1').val(price * $(this).closest('table').find('.total').data('value'));
  $(this).closest('table').find('.price_unit').val($(this).closest('table').find('.total1').data('value') / $(this).closest('table').find('.qty').data('value'));
  });
  });
  });//]]> 


 </script>
 </head>
  <body>
  <div class="base"> <!--Keep each group in base container-->
  <table border="1"><tr>
   <td><select id="category0">
   <option value="1" data-price="10">USD</option>
   <option value="2" data-price="20">INR</option>
   <option value="3" data-price="30">AUD</option>
    </select></td>
    <td><label>Dept. num:</label>
     <input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
     <td><label>Price:</label>
     <input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
     <td><label>Total:</label><input data-value="50" type="text" readonly class="total" value="50"/></td>
     <td><label>Qty:</label><input type="text" class="qty" value="5"/></td>
     <td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>
    <td><label>Price/Unit:</label><input type="text" readonly class="price_unit" /></td>

  </tr></table>
  </div>
  <div class="base"> <!--Keep each group in base container-->
  <table border="1"><tr>
  <td><select id="category1">
   <option value="1" data-price="10">USD</option>
   <option value="2" data-price="20">INR</option>
   <option value="3" data-price="30">AUD</option>
   </select></td>
    <td><label>Dept. num:</label>
    <input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
     <td><label>Price:</label>
     <input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
     <td><label>Total:</label><input data-value="50" type="text" readonly class="total" value="50"/></td>
       <td><label>Qty:</label><input type="text" class="qty" value="5" /></td>
      <td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>
      <td><label>Price/Unit:</label><input type="text" readonly class="price_unit"/></td>
   </tr></table>
  </div>
  <div class="base"> <!--Keep each group in base container-->
  <table border="1"><tr>
   <td><select id="category2">
   <option value="1" data-price="10">USD</option>
   <option value="2" data-price="20">INR</option>
   <option value="3" data-price="30">AUD</option>
</select></td>
<td><label>Dept. num:</label>
<input type="text" class="deptip" id="dept-input"/><!--give them a class--></td>
<td><label>Price:</label>
<input type="text" class="priceip" id="price-input"/> <!--a class here too--></td>
<td><label>Total:</label><input data-value="50" type="text" readonly class="total" value="50"/></td>
    <td><label>Qty:</label><input type="text" class="qty" value="5" /></td>
<td><label>Total1:</label><input data-value="50" type="text" readonly class="total1"/></td>
    <td><label>Price/Unit:</label><input type="text" readonly class="price_unit"/></td>

 </tr></table>
  </div>
 </body>
 </html>

您的.qty输入有一个value，您试图获得它的data-value

试试这个

$("select").on('change', function () {
    var dept_number = $(this).val();
    var price = $(this).find(':selected').data('price');
    $(this).closest('table').find('.deptip').val(dept_number);
    $(this).closest('table').find('.priceip').val(price);
    $(this).closest('table').find('.total1').val(price * $(this).closest('table').find('.total').data('value'));
    $(this).closest('table').find('.price_unit').val($(this).closest('table').find('.total1').data('value') / $(this).closest('table').find('.qty').val());
});
https://jsfiddle.net/zu6uvzxv/2/

您需要使用parseInt或parseFloat将字符串var转换为float或int 

 $(this).closest('table').find('.price_unit').val(parseInt($(this).closest('table').find('.total1').attr('value')) / parseInt($(this).closest('table').find('.qty').attr('value')));
相关文章：