選択した数量で価格を加算します - JavaScript

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 ; 

は、どのように私はそれを得るのですか？

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

jqueryの：私は、ユーザーがでforeachループの内側に選びだした量を得る

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

：私は私がすべて異なる価格を取得..まだ

JavaScriptに新たなんです許可されています。私は立ち往生している。

Answer 1

これを実現するには、.quantity要素にchangeととを入力するだけで、製品ラインの合計を持つ配列が作成されます。これを試してみてください

$('.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()という名前の関数を作って、それが各行の合計金額を算出し、これを試してみてください。

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 + '$'); 
 
    } 
 
    
 
    
 
}

<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>