Question

我试图建立一个功能，从购物卡中的产品中获取所有价格，并将价格与用户选择的数量相乘。

首先我构建这个函数：

function calculate() {
    var total = 0;
    var priceCells = document.getElementsByClassName("priceCell");
    for (var i = 0; i < priceCells.length; i++) {
        var thisPrice = priceCells[i].innerHTML;
        var quantity = document.getElementsByClassName("quantity")[i].value;
        thisPrice = thisPrice * quantity;
        total = total + thisPrice;
    }
    total = total.toFixed(2);
}

这使我得出所有产品的价格乘以所选数量。

这很棒，而且非常完美。

我现在需要的是一个类似的功能（例如：calculateSinglePrice），它给出了单个产品的价格乘以用户想要的特定产品所需的数量。

像：

// my table
<table bla bla bla>
    <tr>
        <th></th>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td class="priceCell">
            50$
        </td>
        <td>
            <input type="number" class="form-control text-center quantity" min="1" max="999" value="4"> // the user has choose 4 
        </td>
        <td>
            // I want to output here the first result
        </td>
    </tr>
    <tr>
        <td class="priceCell">
            20$
        </td>
        <td>
            <input type="number" class="form-control text-center quantity" min="1" max="999" value="5"> // the user has choose 5
        </td>
        <td>
            // I want to output here the seccond result
        </td>
    </tr>
    <tr>
        <td class="priceCell">
            5$
        </td>
        <td>
            <input type="number" class="form-control text-center quantity" min="1" max="999" value="10"> // the user has choose 10
        </td>
         <td>
            // I want to output here the third result
        </td>
    </tr>
</table>

我希望得到结果：

    totalitem[0] = 200$ // Result from  50$ * 4 ;
    totalitem[1] = 100$ // Result from  20$ * 5 ;
    totalitem[2] = 50$ // Result from  5€$ * 10 ;

我该怎么做？我还是javascript的新手..

我得到了所有不同的价格：

var priceCells = document.getElementsByClassName("priceCell");

我得到用户在foreach循环中选择的数量：

var quantity = document.getElementsByClassName("quantity")[i].value;

允许使用Jquery。我被卡住了。

Answer 1

要实现此目的，您只需将change和paste事件处理程序附加到.quantity元素，然后循环遍历它们以创建包含产品系列总计的数组。试试这个：

$('.quantity').on('change', getTotals);

function getTotals() {
  var totals = $('.quantity').map(function() {
    var $tr = $(this).closest('tr');
    return parseFloat($tr.find('.priceCell').text()) * parseInt($(this).val(), 10);
  }).get();
  
  console.log(totals);
}

getTotals(); // on load

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table bla bla bla>
  <tr>
    <th></th>
    <th></th>
  </tr>
  <tr>
    <td class="priceCell">50$</td>
    <td><input type="number" class="form-control text-center quantity" min="1" max="999" value="4"></td>
  </tr>
  <tr>
    <td class="priceCell">20$</td>
    <td><input type="number" class="form-control text-center quantity" min="1" max="999" value="5"></td>
  </tr>
  <tr>
    <td class="priceCell">5$</td>
    <td><input type="number" class="form-control text-center quantity" min="1" max="999" value="10"></td>
  </tr>
</table>

Answer 2

试试这个：

我创建了一个名为calculateSinglePrice()的函数，它计算每行的总价格。

＆＃13;

calculateSinglePrice();
function calculate() {
    var total = 0;
    var priceCells = document.getElementsByClassName("priceCell");
    for (var i = 0; i < priceCells.length; i++) {
        var thisPrice = priceCells[i].innerHTML;
        var quantity = document.getElementsByClassName("quantity")[i].value;
        thisPrice = thisPrice * quantity;
        total = total + thisPrice;
    }
    total = total.toFixed(2);
}

function calculateSinglePrice()
{

    var priceCells = document.getElementsByClassName("priceCell");
      for (var i = 0; i < priceCells.length; i++) {
      var total = 0;
        var thisPrice = priceCells[i].innerHTML;
        thisPrice = thisPrice.substring(0, thisPrice.indexOf('$'));
        var quantity = document.getElementsByClassName("quantity")[i].value;
        thisPrice = thisPrice * quantity;
        total = total + thisPrice;
  
       console.log(total + '$');
    }
    
 
}

＆＃13;

<table bla bla bla>
    <tr>
        <th></th>
        <th></th>
    </tr>
    <tr>
        <td class="priceCell">
            50$
        </td>
        <td>
            <input type="number" class="form-control text-center quantity" min="1" max="999" value="4"> 
        </td>
    </tr>
    <tr>
        <td class="priceCell">
            20$
        </td>
        <td>
            <input type="number" class="form-control text-center quantity" min="1" max="999" value="5"> 
        </td>
    </tr>
    <tr>
        <td class="priceCell">
            5$
        </td>
        <td>
            <input type="number" class="form-control text-center quantity" min="1" max="999" value="10"> 
        </td>
    </tr>
</table>

＆＃13;

添加所选数量的价格 - JavaScript

2 个答案: