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());添加到您的代码中以进行调试。

JQuery继续获得NaN

1 个答案: