使用jQuery进行简单计算

Question

HI告诉我开发一个简单的计算器，当用户通过勾选复选框选择任何产品时，所选产品的价格将显示在.count <td>中有四个产品，每个产品都有它自己的checkhox和.count类。

现在，当用户选择任何产品并增加其数量加上所有金额并显示在.countTotal时，我想要的主要内容。

根据我的代码显示NaN

请帮帮我

您可以在下方查看我的代码，也可以查看 fiddle here

HTML

<div class="brochure"><table width="100%" border="0" cellspacing="0" cellpadding="10" >
  <tr>
    <td width="21%" align="center"><input type="checkbox" value="50" class="" name="radio"> 
    Rs. 50 </td>
    <td width="29%" align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td width="10%" align="center"><label for=" "></label>
      <input name=" 2" type="text" class="qty" id=" " maxlength="2"></td>
    <td width="40%" align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="75" class="" name="radio5">
Rs. 75 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 3" type="text" class="qty" id=" 2" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="100" class="" name="radio6">
Rs. 100 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 4" type="text" class="qty" id=" 3" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="125" class="" name="radio7">
Rs. 125 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td align="center"><input name=" 6" type="text" class="qty" id=" 4" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">Total</td>
    <td align="center" class="countTotal">&nbsp;</td>
  </tr>
              </table>
</div>

SCIRPT

$('.sticker input.qty, .brochure input.qty').prop('disabled', true);

        var total;
        var price = 0;
        var qty; 
        var prPrice = 0;
        var i = 0;
        var prPricemain = 0;
$('.sticker input[type="checkbox"], .brochure input[type="checkbox"]').on('change',function(){

    if($(this).is(':checked'))
    {

        var val = $(this).attr('value');
        $(this).closest('tr').find('input.qty').prop('disabled', false);        
        $(this).closest('tr').find('input.qty').val('1');
        $(this).closest('tr').find('.count').text(val);



        $(this).closest('tr').find('input.qty').on('keyup',function(){
            qty = $(this).val();
            prPrice = qty * val;
            $(this).closest('tr').find('.count').text(prPrice);

            })

        }
    else
    {

        $(this).closest('tr').find('input.qty').prop('disabled', true);     
        $(this).closest('tr').find('input.qty').val('');

            $(this).closest('tr').find('.count').text('');

        }




        $(this).closest('table').find('.count').each(function() {

            prPricemain = parseInt($(this).html());
            prPricemain = prPricemain + prPrice


        });

            $(this).closest('table').find('.countTotal').text(prPricemain);

    })


$('.qty').keyup(function(e)
{
    if (/\D/g.test(this.value))
    {
        alert('Numbers Only')
        this.value = this.value.replace(/\D/g, '');
    }
});

Answer 1

使用它 的 HTML

<div class="brochure"><table width="100%" border="0" cellspacing="0" cellpadding="10" >
  <tr>
    <td width="21%" align="center"><input type="checkbox" value="50" class="" name="radio"> 
    Rs. 50 </td>
    <td width="29%" align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td width="10%" align="center"><label for=" "></label>
      <input name=" 2" type="text" class="qty" id=" " maxlength="2"></td>
    <td width="40%" align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="75" class="" name="radio5">
Rs. 75 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 3" type="text" class="qty" id=" 2" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="100" class="" name="radio6">
Rs. 100 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_front.jpg" width="50" height="117" alt=" "></td>
    <td align="center"><input name=" 4" type="text" class="qty" id=" 3" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center"><input type="checkbox" value="125" class="" name="radio7">
Rs. 125 </td>
    <td align="center"><img src="images/thumb_brochure_singlepage_back.jpg" alt=" "></td>
    <td align="center"><input name=" 6" type="text" class="qty" id=" 4" maxlength="2"></td>
    <td align="center" class="count">&nbsp;</td>
  </tr>
  <tr>
    <td align="center">&nbsp;</td>
    <td align="center">&nbsp;</td>
    <td align="center">Total</td>
    <td align="center" class="countTotal">&nbsp;</td>
  </tr>
              </table>
</div>

<强> Jquery的

$('.sticker input.qty, .brochure input.qty').prop('disabled', true);

        var total;
        var price = 0;
        var qty; 
        var prPrice = 0;
        var i = 0;
        var prPricemain = 0;
$('.sticker input[type="checkbox"], .brochure input[type="checkbox"]').on('change',function(){

    if($(this).is(':checked'))
    {

        var val = $(this).attr('value');
        $(this).closest('tr').find('input.qty').prop('disabled', false);        
        $(this).closest('tr').find('input.qty').val('1');
        $(this).closest('tr').find('.count').text(val);



        $(this).closest('tr').find('input.qty').on('keyup',function(){
            qty = $(this).val();
            prPrice = qty * val;
            $(this).closest('tr').find('.count').text(prPrice);

            })

        }
    else
    {

        $(this).closest('tr').find('input.qty').prop('disabled', true);     
        $(this).closest('tr').find('input.qty').val('');

            $(this).closest('tr').find('.count').text('');

        }


         prPrice = 0;

        $(this).closest('table').find('.count').each(function() {

            prPricemain = parseInt($(this).html());

            if($(this).html()==" ")
            {
            prPricemain=0;
            }else
            {

            prPrice = prPrice + prPricemain
            }


        });

            $(this).closest('table').find('.countTotal').text(prPrice);

    })


$('.qty').keyup(function(e)
{
    if (/\D/g.test(this.value))
    {
        alert('Numbers Only')
        this.value = this.value.replace(/\D/g, '');
    }});
$('.qty').blur(function(e)
{
prPrice=0;
    $(this).closest('table').find('.count').each(function() {

            prPricemain = parseInt($(this).html());

            if($(this).html()==" ")
            {
            prPricemain=0;
            }else
            {

            prPrice = prPrice + prPricemain
            }


        });
        $(this).closest('table').find('.countTotal').text(prPrice);
});

http://jsfiddle.net/UmcvP/1/

Answer 2

您的问题必须执行以下代码

$(this).closest('table').find('.count').each(function () {

    prPricemain = parseInt($(this).html());
    prPricemain = prPricemain + prPrice


});

$（this）.html（）为空，因此会返回NaN。

我已将代码更改为以下

prPricemain = 0;
$(this).closest('table').find('.count').each(function () {

    if ($.trim($(this).text()) && !isNaN($(this).text())) {
        prPrice = parseInt($(this).html());
        prPricemain = prPricemain + prPrice
    }

});

改变的原因不仅在于您获得总数的NaN，而且您的总数将继续计算并且永不退缩。

My jsFiddle

<强>更新

在这种情况下，创建一个custome事件以在需要执行计算时触发。

$('.sticker input[type="checkbox"], .brochure input[type="checkbox"]').on('change', function () {

    if ($(this).is(':checked')) {

        var val = $(this).attr('value');
        $(this).closest('tr').find('input.qty').prop('disabled', false);
        $(this).closest('tr').find('input.qty').val('1');
        $(this).closest('tr').find('.count').text(val);



        $(this).closest('tr').find('input.qty').on('keyup', function () {

            qty = $(this).val();
            prPrice = qty * val;
            $(this).closest('tr').find('.count').text(prPrice);
            //Call the calculation event
            $(this).closest('table').find('input[type="checkbox"]').trigger('calculateTotal');
        })

    } else {

        $(this).closest('tr').find('input.qty').prop('disabled', true);
        $(this).closest('tr').find('input.qty').val('');

        $(this).closest('tr').find('.count').text('');

    }

    //Call the calculation event
    $(this).trigger('calculateTotal');
}).on('calculateTotal', function (e) {
    prPricemain = 0;
    $(this).closest('table').find('.count').each(function () {

        if ($.trim($(this).text()) && !isNaN($(this).text())) {
            prPrice = parseInt($(this).html());
            prPricemain = prPricemain + prPrice
        }

    });

    $(this).closest('table').find('.countTotal').text(prPricemain);
});

Updated jsFiddle