Question

也许是一个愚蠢的问题，但我无法找到答案。还在学习:)）

我有一个带有两个输入字段且具有相同类名的表单。我试图抓住这两个值并计算平方米和价格。抓取输入值不是一个问题，但是＆＃34;存储＆＃34;变量中的值是。

要计算我需要做的事情，比如L x W x Price。但是如何在使用.each（）函数时创建两个Length和Width变量（名称可以是不同的offcourse）？这是一个好方法吗？

添加ID或类名不是一个选项，因为所有内容都是动态创建的！

所以我拥有的是：

function update_amounts() {
  var price = '129';
  var sum = 0;  

  $('#product_configure_form .product-configure-custom-option input').each(function(){

   var value = parseFloat($(this).val()) / 100;

  });
      // Here I need to do something like 
      sum = value1 * value2 * price
      ////////////////////////////////// 

       var sumsum = sum.toString().replace(/\./g, ',');    
       $('.price-wrap .price').text('€ ' + sumsum);
     }

     $(document).ready(function(){
       $("#product_configure_form").on("change", ".product-configure-custom-option input", update_amounts);
     });

Answer 1

更好的方法是使用类或数据属性。这将使您的代码更具可读性。

如果您想继续使用当前的方法，请按照此处进行操作。

如果您知道输入框的索引，即它们的排列顺序，您可以使用：

var values={value1:0,value2:0};
$('#product_configure_form .product-configure-custom-option input').each(function(index, element){
    if(index==0)
    {
        values.value1=$(element).val();
    }
    else if(index==1)
    {
        values.value2=$(element).val();
    }
});
//now value1 has the first, and value2 has the second
//then do sum = values.value1 * values.value2 * price

Answer 2

由于您拥有固定数量的元素，因此您可以跳过foreach并使用jQuery选择器来查找这两个值并执行您想要的任何操作。

    val1 = $(".product-configure-custom-option:first").val()
    val2 = $(".product-configure-custom-option:nth(1)").val()

Answer 3

试试这个：

 function update_amounts() {
 var price = '129';
 var sum = 0;  
  $('#product_configure_form .product-configure-custom-option input').each(function( i,el ){

 sum += parseFloat( el.value ) / 100;

 });

   sum = sum.toString().replace(/\./g, ',');   

   $('.price-wrap .price').text('€ ' + sum);
 }

 $(document).ready(function(){
   $("#product_configure_form").on("change", ".product-configure-custom-option input", update_amounts);
 });

Answer 4

在函数上方设置一个全局变量，允许您保存变量值，或者可以使用.next()内部循环来选择下一个元素。我认为你的方法是正确的只需要一些修改，添加你的html以获得更多帮助

Answer 5

这是一个我认为更干净的香草javascript解决方案：

＆＃13;

var price = 129;
document.getElementById('bar').addEventListener('click', function(val) {
    var inputs = document.querySelectorAll('#foo input');
    var res = Array.from(inputs) // or [].slice.call(inputs) for older browsers
        .reduce(function(now,pre){return now.value * pre.value}) * price;   
  document.getElementById('res').innerHTML = res.toString().replace('.',',') + '€';
});

＆＃13;

<form id="foo">
    <input/>
    <input/>
</form>
<button id="bar">Click</button>
<div id="res"></div>

＆＃13;

Answer 6

以下是您提供的代码的修改工作示例：

＆＃13;

function update_amounts() {
  var price = '129';
  var sum = 0;
  var value1, value2;

  value1 = parseFloat($('#value1').val()) / 100;
  value2 = parseFloat($('#value2').val()) / 100;
  // Here I need to do something like 
  sum = value1 * value2 * price;
  ////////////////////////////////// 

  var sumsum = sum.toString().replace(/\./g, ',');
  $('#price').text('€ ' + sumsum);
}

$(document).ready(function() {
  $(document).on("change", "input", update_amounts);
  update_amounts();
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<label for="value1Input">value1:</label>
<input id="value1" name="value1Input" value="10.0" /><br/>
<label for="value2Input">value2:</label>
<input id="value2" name="value2Input" value="12.5" />
<div id="price"></div>

＆＃13;

使用输入字段和每个函数进行计算

6 个答案: