JQuery不斷收到NaN

Question

當tbody.addnumber中輸入一些數字時，我試圖讓tfoot #totaladdnumber中顯示的數字和顯示乘以tfoot中的產品價格#totaladdprice，但在#totaladdprice中繼續獲得$ NaN

我該怎麼辦？

這裏是我的代碼

$('.addnumber').keyup(function() { 
    var sum = 0; 
    $('.addnumber').each(function() { 
     sum += Number($(this).val()); 
    }); 
    $('#totaladdnumber').val(sum + 'Packs'); 

    $('.addnumber').change(function(){ 
     var group = parseInt($('#totaladdnumber').val()); 
     var price = parseFloat($('.variantprice').val()); 
     var total = group * price; 
     $('#totaladdprice').val('$' + total) 
    }); 
}); 

這裏是我的表

 <table> 
     <thead style="background:#ccc;" > 
     <tr> 
      <th>Color</th> 
      <th>Item #</th> 
      <th>Pack</th> 
      <th>Pack Price</th> 
      <th>&nbsp;</th> 
     </tr> 
     </thead> 
     <tbody> 
     {% for variant in product.variants %} 
     {% if variant.available %} 
     <tr class="{% cycle 'pure-table-odd', '' %}"> 
      <td> 
       <a href="{{ variant.url | collection }}" > 
       <center><img src="{{ variant.image | default: product.featured_image | img_url: 'small' }}" alt="{{ variant.title | escape }}" style="width:50px;" /></center> 
       </a> 
       <center><div>{{ variant.title }}</div></center> 
      </td> 
      <td> 
       <a href="{{ variant.url | collection }}"> 
       <center>{{ variant.sku }}</center> 
       </a> 
      </td> 
      <td> 

       <center><div> 
       {% if settings.show-quantity %} 

       <input min="0" {% unless variant.inventory_management == blank or variant.inventory_policy == 'continue' %} max="{{ variant.inventory_quantity }}" {% endunless %} type="text" id="quantity" class="quantity addnumber values" name="updates[{{ variant.id }}]" value="0" tabindex="1" /> 

       {% endif %} 
       </div></center> 
       </td> 

     <td><center><input type="text" id='variantprice' class="quantity values" value="{{ variant.price | money }}" disabled /></center></td> 


     </tr> 
     {% endif %} 
     {% endfor %} 
     </tbody> 
     <tfoot style="background:#ccc;"> 
     <tr> 

      <td><center>&nbsp;</center></td> 
      <td><center>Total</center></td> 
      <td><center><input type='text' id='totaladdnumber' class="quantity" disabled /></center></td> 
      <td><center><input type='text' id='totaladdprice' class="quantity" diabled /></center></td> 
      <td><center>&nbsp;</center></td> 

     </tr> 
     </tfoot> 
    </table> 
     {% if product.available %} 
     <div id="product-add"> 
     <input type="submit" name="button" class="add" id="AddToCart" value="{{ 'products.product.add_to_cart' | t }}" /> 
     </div> 
     <p class="add-to-cart-msg"></p> 
     {% endif %} 
     <div class="clear"></div> 
    </form> 

Answer 1

留意傳遞到parseInt和parseFloat數據。如果傳遞參數中沒有數字，則返回NaN。

var group = parseInt(""); // NaN 
var price = parseFloat("ten"); // NaN 

將console.log($('#totaladdnumber').val(), $('.variantprice').val());添加到您的代碼以便調試它。