Question

我做了一个小形式来测试一些东西，但我遇到了一个小问题，我真的不知道如何解决。

当用户使用javascript输入不同的数字时，我输入字段和价格会发生变化，如下所示：

function changeTotalFromCount(input) {
    var unitPrice = parseFloat(input.getAttribute("data-unitPrice"));
    var count = input.value;

    var price = unitPrice * count;
    var formattedPrice = '\u20ac ' + price.toFixed(2);

    var label = input.parentNode.nextElementSibling;
    label.innerHTML = '';
    if (count != ''){
        label.appendChild(document.createTextNode(formattedPrice));
    } else {
        label.appendChild(document.createTextNode(''));
    }
}

我的表单中有大约10种产品，我从这个数组中取出：

<?php foreach($productsData as $productData):?>
    <tr>
        <td><?php echo $productData['product']?></td>
        <td>&#8364; <?php echo $productData['price']?></td>
        <td><input type="number" id="count<?php echo $productData['code']?>" class="formnumbers" name="<?php echo $productData['name']?>" onChange="validateForm(this);changeTotalFromCount(this);" min="1" max="99"  data-unitprice="<?php echo $productData['price']?>"/></td>
        <td><span id="total<?php echo $productData['code']?>"></span></td>
    </tr>
<?php endforeach;?>

我的数组看起来像这样：

<?php
    $productsData = array(
        array( 'product' => 'Pizza Margherita',         'code' => 'Margherita',         'name' => 'PizzaMargherita',        'price' => '7.00'),
        array( 'product' => 'Pizza Fungi',              'code' => 'Fungi',              'name' => 'PizzaFungi',             'price' => '8.00'),
        array( 'product' => 'Pizza Hawai',              'code' => 'Hawai',              'name' => 'PizzaHawai',             'price' => '9.00'),
        array( 'product' => 'Pizza QuattroStagioni',    'code' => 'QuattroStagioni',    'name' => 'PizzaQuattroStagioni',   'price' => '11.00'),
        array( 'product' => 'Pizza Calzone',            'code' => 'Calzone',            'name' => 'PizzaCalzone',           'price' => '13.00'),
        array( 'product' => 'Broodje Shoarma',          'code' => 'BroodjeShoarma',     'name' => 'BroodjeShoarma',         'price' => '5.00'),
        array( 'product' => 'Broodje Doner',            'code' => 'BroodjeDoner',       'name' => 'BroodjeDoner',           'price' => '5.50'),
        array( 'product' => 'Durum Doner',              'code' => 'DurumDoner',         'name' => 'DurumDoner',             'price' => '6.00'),
        array( 'product' => 'Knoflook Saus',            'code' => 'KnoflookSaus',       'name' => 'KnoflookSaus',           'price' => '0.50'),
        array( 'product' => 'Whiskey Saus',             'code' => 'WhiskeySaus',        'name' => 'WhiskeySaus',            'price' => '0.50'),
        array( 'product' => 'Sambal Saus',              'code' => 'SambalSaus',         'name' => 'SambalSaus',             'price' => '0.50')
     );
?>

这一切都很好，但我需要一个总价格，它会显示在底部，当用户说增加1个产品时，它会花费7.00美元，它会说7个，但是当用户订购2个产品时需要花费10.00美元它将变为$ 27.00

我希望我的问题清楚，如果没有，请告诉我！

一个小小的JSFiddle让你了解最新动态：http://jsfiddle.net/ygHSC/

在这个例子中，我没有用我的阵列取出我的所有产品，但我希望你能得到我想做的。

Answer 1

你需要一个在所有输入字段上都有某种循环的方法，就像你为一个字段创建的那个，并且每次更新一个字段时都会触发调用：

function getTotalPrice() {
  var total = 0,
      inputs = document.getElementsByTagName('input');
  for (var i = 0; i < inputs.length; i++) {
    if(inputs[i].value) {
      total += parseFloat(inputs[i].getAttribute("data-unitPrice")) * 
               parseInt(inputs[i].value,10);
    }
  }
  if(total > 0) {
    document.getElementById('TARGET').innerText = '\u20ac ' + total.toFixed(2);
  }
}

更新的小提琴是here。

Answer 2

取每个总数并每次添加并将其放在TOtal价格的地方，

Answer 3

我会使用change事件来更新每个输入的变量，并创建一个小的单独函数将它们添加到一起并返回总数。

使用javascript计算总价

3 个答案: