JQuery显示多个值字段的总计

时间：2015-10-18 14:31:18

标签： jquery

我有以下jQuery脚本：

＆＃13;
＆＃13; 
$(document).ready(function(){
            $xenta_price = 20;
            $xentissimo_price = 21;
            $yomani_price = 22;
            $yoximo_price = 23;

            $("#xenta").change(function(){
                if($(this).val() > 0){
                    $("#xenta_price").html("<b>Xenta:</b> " + $(this).val() + "x = " + ($(this).val() * $xenta_price) + "€");
                    $("#total").html("<hr><b>Total:</b>");
                }else{
                    $("#xenta_price").html("");
                }
            });
            $("#xentissimo").change(function(){
                if($(this).val() > 0){
                    $("#xentissimo_price").html("<b>Xentissimo:</b> " + $(this).val() + "x = " + ($(this).val() * $xentissimo_price) + "€");
                }else{
                    $("#xentissimo_price").html("");
                }
            });
            $("#yomani").change(function(){
                if($(this).val() > 0){
                    $("#yomani_price").html("<b>Yomani:</b> " + $(this).val() + "x = " + ($(this).val() * $yomani_price) + "€");
                }else{
                    $("#yomani_price").html("");
                }
            });
            $("#yoximo").change(function(){
                if($(this).val() > 0){
                    $("#yoximo_price").html("<b>Yoximo:</b> " + $(this).val() + "x = " + ($(this).val() * $yoximo_price) + "€");
                }else{
                    $("#yoximo_price").html("");
                }
            });
        });
＆＃13; 
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-2">
        <div class="form-group">
            <label class="col-md-3 control-label" for="xenta">XENTA:</label>
            <div class="col-md-3">
                <input id="xenta" name="xenta" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="xentissimo">XENTISSIMO:</label>
            <div class="col-md-3">
                <input id="xentissimo" name="xentissimo" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="yomani">YOMANI:</label>
            <div class="col-md-3">
                <input id="yomani" name="yomani" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="yoximo">YOXIMO:</label>
            <div class="col-md-3">
                <input id="yoximo" name="yoximo" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
        </div>

       
    </div>
    <div class="col-xs-12 col-md-2 col-sm-12" style="border-left: 1px solid black;">
        <div id="xenta_price"></div>
        <div id="xentissimo_price"></div>
        <div id="yomani_price"></div>
        <div id="yoximo_price"></div>
        <div id="total"></div>
    </div>
</div>
＆＃13;
＆＃13;
＆＃13;

每当我在这4个表单字段之一中插入一个值时，我想自动生成所有内容的小计。任何人都有一个想法，我怎么能以最好的方式完成这个？

2 个答案:

答案 0 :(得分：0)

您可以保留变量中每个项目的值，以便您可以轻松计算它们的总和：

$(document).ready(function(){
  var $xenta_price = 20;
  var $xentissimo_price = 21;
  var $yomani_price = 22;
  var $yoximo_price = 23;
  var xenta = 0;
  var xentissimo = 0;
  var yomain = 0;
  var yoximo = 0;

  $("#xenta").change(function(){
    if($(this).val() > 0){
      xenta = $(this).val() * $xenta_price;
      $("#xenta_price").html("<b>Xenta:</b> " + $(this).val() + "x = " + xenta + "€");
    } else {
      xenta = 0;
      $("#xenta_price").html("");
    }
    $("#total").html("<hr><b>Total:" + (xenta+xentissimo+yomain+yoximo) + "€</b>");
  });

  $("#xentissimo").change(function(){
    if($(this).val() > 0){
      xentissimo = $(this).val() * $xentissimo_price;
      $("#xentissimo_price").html("<b>Xentissimo:</b> " + $(this).val() + "x = " + xentissimo + "€");
    } else {
      xentissimo = 0;
      $("#xentissimo_price").html("");
    }
    $("#total").html("<hr><b>Total:" + (xenta+xentissimo+yomain+yoximo) + "€</b>");
  });

  $("#yomani").change(function(){
    if($(this).val() > 0){
      yomain = $(this).val() * $yomani_price;
      $("#yomani_price").html("<b>Yomani:</b> " + $(this).val() + "x = " + yomain + "€");
    } else {
      yomain = 0;
      $("#yomani_price").html("");
    }
    $("#total").html("<hr><b>Total:" + (xenta+xentissimo+yomain+yoximo) + "€</b>");
  });

  $("#yoximo").change(function(){
    if($(this).val() > 0){
      yoximo = $(this).val() * $yoximo_price;
      $("#yoximo_price").html("<b>Yoximo:</b> " + $(this).val() + "x = " + yoximo + "€");
    } else {
      yoximo = 0;
      $("#yoximo_price").html("");
    }
    $("#total").html("<hr><b>Total:" + (xenta+xentissimo+yomain+yoximo) + "€</b>");
  });

});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-2">
        <div class="form-group">
            <label class="col-md-3 control-label" for="xenta">XENTA:</label>
            <div class="col-md-3">
                <input id="xenta" name="xenta" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="xentissimo">XENTISSIMO:</label>
            <div class="col-md-3">
                <input id="xentissimo" name="xentissimo" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="yomani">YOMANI:</label>
            <div class="col-md-3">
                <input id="yomani" name="yomani" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="yoximo">YOXIMO:</label>
            <div class="col-md-3">
                <input id="yoximo" name="yoximo" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
        </div>

       
    </div>
    <div class="col-xs-12 col-md-2 col-sm-12" style="border-left: 1px solid black;">
        <div id="xenta_price"></div>
        <div id="xentissimo_price"></div>
        <div id="yomani_price"></div>
        <div id="yoximo_price"></div>
        <div id="total"></div>
    </div>
</div>

答案 1 :(得分：0)

使用data-attributes：

$(document).ready(function(){
            $xenta_price = 20;
            $xentissimo_price = 21;
            $yomani_price = 22;
            $yoximo_price = 23;

            $("#xenta").change(function(){
                if($(this).val() > 0){
                    $("#xenta_price").html("<b>Xenta:</b> " + $(this).val() + "x = " + ($(this).val() * $xenta_price) + "€");
                    $("#total").html("<hr><b>Total:</b>");
                  makeTotal();
                }else{
                    $("#xenta_price").html("");
                }
            });
            $("#xentissimo").change(function(){
                if($(this).val() > 0){
                    $("#xentissimo_price").html("<b>Xentissimo:</b> " + $(this).val() + "x = " + ($(this).val() * $xentissimo_price) + "€");
                  makeTotal();
                }else{
                    $("#xentissimo_price").html("");
                }
            });
            $("#yomani").change(function(){
                if($(this).val() > 0){
                    $("#yomani_price").html("<b>Yomani:</b> " + $(this).val() + "x = " + ($(this).val() * $yomani_price) + "€");
                  makeTotal();
                }else{
                    $("#yomani_price").html("");
                }
            });
            $("#yoximo").change(function(){
                if($(this).val() > 0){
                    $("#yoximo_price").html("<b>Yoximo:</b> " + $(this).val() + "x = " + ($(this).val() * $yoximo_price) + "€");
                  makeTotal();
                }else{
                    $("#yoximo_price").html("");
                }
            });
         
           
        });

 function makeTotal(){
            var sum = 0;
           
            $("input").each(function(){
              var val = (Number($(this).val()));
              var price = (Number($(this).data("price")));
              //var calc = Number($(this).val()) * Number($(this).attr("price"));
              sum = Number(sum) + (val*price) ;
              //console.log(sum);
              $("#total").html(sum)

           });
            
            $("#total").html("Total = "+sum+" €");
          }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="row">
    <div class="col-xs-12 col-sm-12 col-md-6 col-md-offset-2">
        <div class="form-group">
            <label class="col-md-3 control-label" for="xenta">XENTA:</label>
            <div class="col-md-3">
                <input class="control" data-price=20 id="xenta" name="xenta" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="xentissimo">XENTISSIMO:</label>
            <div class="col-md-3">
                <input class="control" data-price=21 id="xentissimo" name="xentissimo" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="yomani">YOMANI:</label>
            <div class="col-md-3">
                <input class="control" data-price=22 id="yomani" name="yomani" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
            <label class="col-md-3 control-label" for="yoximo">YOXIMO:</label>
            <div class="col-md-3">
                <input class="control" data-price=23 id="yoximo" name="yoximo" type="number" placeholder="Anzahl/Amount/Quantité" class="form-control input-md" value="0"> x20 Rollen/Rolls/Rouleaux
            </div>
        </div>

       
    </div>
    <div class="col-xs-12 col-md-2 col-sm-12" style="border-left: 1px solid black;">
        <div id="xenta_price"></div>
        <div id="xentissimo_price"></div>
        <div id="yomani_price"></div>
        <div id="yoximo_price"></div>
        <div id="total"></div>
    </div>
</div>

相关问题
最新问题