Question

如果我尝试将输入类更改为val1或val2以外的其他内容，gandTotal将停止工作？任何想法为什么会这样？

我想更改第1和第3个字段并添加if语句，如

if ( $val1 <= 20 ) { $total = 0 } else { $total =$val1 * 1 ) * ($val2 * 1)-10);}

example

       <table>

        <tr class="calcrow no1">
            <td>
                <input name="txtEmmail" class="val1"  />
            </td>
            <td>
                <input name="txtEmmail" class="val2" value="0.5"/>
            </td>
            <td>
                    <span class="multTotal">0.00</span>
            </td>
        </tr>
        <tr class="calcrow no2">
            <td>
                <input name="txtEmmail" class="val1"  />
            </td>
            <td>
                <input name="txtEmmail" class="val2" value="49.5"/>
            </td>
            <td>
                    <span class="multTotal">0.00</span>
            </td>
        </tr>
        <tr class="calcrow  no3">
            <td>
                <input name="txtEmmail" class="val1"  />
            </td>
            <td>
                <input name="txtEmmail" class="val2" value="20"/>
            </td>
            <td>
                    <span class="multTotal">0.00</span>
            </td>
        </tr>
        <tr class="calcrow no4">
            <td>
                <input name="txtEmmail" class="val1"  />
            </td>
            <td>
                <input name="txtEmmail" class="val2" value="49.5"/>
            </td>
            <td>
                    <span class="multTotal">0.00</span>
            </td>
        </tr>

            <tr>
    <td colspan="3" align="right">
        Grand Total#<span id="grandTotal">0.00</span>
    </td>
</tr>
    </table> 

 <script>   
     $(document).ready(function () {
       $(".calcrow  input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           // for each row:
           $(".calcrow ").each(function () {
               // get the values from this row:
               var $val1 = $('.val1', this).val();
               var $val2 = $('.val2', this).val();           
               var $total = ($val1 * 1) * ($val2 * 1)                                      
               $('.multTotal',this).text($total);
               mult += $total;
           });
           $("#grandTotal").text(mult);
       }

  });

  </script>

Answer 1

首先，让我们讨论命名约定。

使用jQuery，元素名称通常以“$”为前缀，如下所示：

var $val1 = $('.val1');

作为值的地方，不应该以相同的前缀

开头

var val1 = $('.val1').val();

我提出这个问题的原因是肯定的，你可以根据需要命名，但是对于其他人来说，阅读和理解你的代码，遵循惯例会使它更容易。

接下来，如果要操纵该值，则应将其转换为数值。所以上面的最后一个陈述应该变成：

var val1 = parseFloat($('.val1').val() || 0);

|| 0将值中的空字符串转换为零。

现在可以使用ternary operator来处理您想要的值：

var total = val1 <= 20 ? 0 : (val1 * 1) * (val2 * 1) - 10;

最后，文本中添加了.toFixed(2)来截断（不圆整！）可见值。

$(document).ready(function () {
  $(".calcrow  input").keyup(multInputs);

  function multInputs() {
    var mult = 0;
    // for each row:
    $(".calcrow ").each(function () {
      // get the values from this row:
      var val1 = parseFloat($('.val1', this).val() || 0);
      var val2 = parseFloat($('.val2', this).val() || 0);
      var total = val1 <= 20 ? 0 : (val1 * 1) * (val2 * 1) - 10;

      $('.multTotal, .sm8',this).text(total.toFixed(2));
      mult += total;
    });
    $("#grandTotal").text(mult.toFixed(2));
  }

});

我可能没有理解您要满足的所有要求，但请在此处试用此演示：http://jsbin.com/jeqiki/edit?html,output

Answer 2

 <script>   
     $(document).ready(function () {
       $(".calcrow  input").keyup(multInputs);

       function multInputs() {
           var mult = 0;
           // for each row:
           $(".calcrow ").each(function () {
               // get the values from this row:
               var val1 = parseFloat($('.val1', this).val() || 0);
               var val2 = parseFloat($('.val2', this).val() || 0);
               var sm8 = parseFloat($('.sm8', this).val() || 0);     
               var vu = parseFloat($('.vu', this).val() || 0);     

                var total =  (val1 * 1) * (val2 * 1);

                var sm8T = sm8 <= 20 ? 0 : (sm8 * 1) * (val2 * 1)-10;     
                var vuT= vu <= 2 ? 0 : (vu * 1) * (val2 * 1)-40;

                $('.vuT',this).text(vuT);                                
               $('.sm8T',this).text(sm8T);
                $('.multTotal',this).text(total.toFixed(2));

               mult += sm8T+vuT+total;
           });
           $("#grandTotal").text(mult.toFixed(2));
       }

  });

  </script>

为什么当我改变或尝试添加另一类不同的输入时，总和会停止工作吗？

2 个答案: