Question

我是Javascript的新手，所以如果这是一个愚蠢的问题，请原谅我

我的JS代码计算“cost”的值，并使用 row.val（cost）将其设置为表单的输入。当它计算了所有产品的所有成本，加，减和乘，我想找到总数。因此，我现在使用“each”方法扫描所有成本输入并创建总和。

问题：计算出的成本输入在屏幕上可见，但它们没有出现在源代码中，因此，我无法使用选择器 $（“input.cost”）获取它们

问题：如何获取输入字段中可见的计算成本值的值？

var runningTotal = 0; // THIS IS DECLARED AS A GLOBAL

$("input.quantity").on('change', function() {

    var row = $(this).parents(':eq(1)').find('input').filter(".cost");
    var price = row.data('price');

    if (price) {
        var quantity = parseFloat($(this).val());
        var cost = (price * quantity);

        row.val(cost);  // COST INSERTED HERE!!

                 $("input.cost").each(function(){
                     var ic = $(this).val(); // TRIED USING HTML AND TEXT METHODS.  
                     var inputCost = Number(ic);
                     runningTotal += inputCost;
                 });

             $("#total").val(runningTotal);


         }

HTML

我使用Laravel Blade，但这里是呈现的HTML源代码片段。当然没有可见的价值。

 <div class="well form-group  ">
                            <div class="col-sm-2 col-md-2"><label for="underlay2">Underlayments:</label></div>
                            <div class="col-sm-4 col-md-4"><select class="form-control product_id" name="product_code[4]"><option selected="selected" value="">None</option><option value="789">BP #15 Plain Felt 36&quot; | $10.00</option><option value="790">BP #30 Plain Felt 36&quot; | $10.00</option></select></div>
                            <div class="col-sm-1  col-md-1"><label for="underlay2_req">Quantity:</label></div>
                            <div class="col-sm-2 col-md-2"><input class="form-control  quantity" name="quantity[4]" type="text"></div>
                            <div class="col-sm-1  col-md-1"><label for="cost">Cost:</label></div>
                            <div class="col-sm-2 col-md-2"><input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value=""></div>
                        </div>

Answer 1

（不是一个愚蠢的问题:)）

看起来您不知道要使用哪个选择器，因为（我相信您已经替换了＆＃34; input.cost＆＃34;对于您需要的实际选择器）。您可以通过浏览器的开发人员工具检查输入来找到它。如果您使用Chrome（我相信其他浏览器的工作方式类似），您可以右键单击该元素并选择＆＃34; Inspect＆＃34;从弹出菜单中 - 这将显示渲染的html，并让您了解需要使用的选择器。

Answer 2

我用你的html看到的只是没有元素被定义为总数。所以你的代码不知道在哪里打印值。

为你创造了一个小提琴。我希望我不会误解这个问题。

https://jsfiddle.net/vatsalpande/ohus8bm5/

以下示例代码

var runningTotal = 0; // THIS IS DECLARED AS A GLOBAL

$(document).ready(function(){
  $("input.quantity").on('change', function() {

    var row = $(this).parents(':eq(1)').find('input').filter(".cost");
    //var price = row.data('price');

     var price = 10 ;//Computed from different function
    if (price) {
       var quantity = parseFloat($(this).val());

        var cost = (price * quantity);


        row.val(cost);  // COST INSERTED HERE!!

             $("input.cost").each(function(){
                 var ic = $(this).val(); // TRIED USING HTML AND TEX     METHODS.  
                 var inputCost = Number(ic);
                 runningTotal += inputCost;
             });

          $("#total").val(runningTotal);


      }
   });
  });

<div class="well form-group  ">
                        <div class="col-sm-2 col-md-2"><label for="underlay2">Underlayments:</label></div>
                        <div class="col-sm-4 col-md-4"><select class="form-control product_id" name="product_code[4]"><option selected="selected" value="">None</option><option value="789">BP #15 Plain Felt 36&quot; | $10.00</option><option value="790">BP #30 Plain Felt 36&quot; | $10.00</option></select></div>
                        <div class="col-sm-1  col-md-1"><label for="underlay2_req">Quantity:</label></div>
                        <div class="col-sm-2 col-md-2"><input class="form-control  quantity" name="quantity[4]" type="text"></div>
                        <div class="col-sm-1  col-md-1"><label for="cost">Cost:</label></div>
                        <div class="col-sm-2 col-md-2">
                        <input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value=""></div>

                        <input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value="">

                        <input class="form-control cost" readonly="readonly" name="cost[0]" type="text" value="">
                    </div>

  <input type = "text" id="total" >

创建三个输入，运行总计将获取所有值的总和。希望这会有所帮助。

快乐学习

Javascript：如何检索输入的计算值

2 个答案: