0

ボタンを押したときに入力値にpタグを掛けたい。私のhtml構造は次のようなものです：

<div class="table">
    <input class="input" type="text" /> 
    <p>10</p>
</div>

<div class="table">
    <input class="input" type="text" />
    <p>20</p>
</div>

<div class="bill"></div> // the result must be displayed in this tag
<button class="button">Calculate</button>

各メソッドを使用して入力要素を選択します。これは私のjquery構造です。

$(function() {
   function calculate()
   {
      $('input.input').each(function(index) {
      var inputValue = $(this).val();
      var valueP = $(this).next('p').text();
      var result = inputValue * valueP;
      $('.bill').text(result);// displays only last multipled result
      console.log(result); // displays all multipled results
   });
   }

   $('.button').click(function() {
       calculate();
   });
});

入力値にpタグを掛けることができますが、問題は、最後に掛けた入力値だけが「bill」のクラスに表示されることです。ただし、console.logでは問題ないように見えます。また、「document.write（result）」でも問題ありません。この問題を解決するにはどうすればよいですか？ちなみに、誰かが私に言ってくれます。どうすればすべての乗算された結果を合計できますか？よろしくお願いします！

4

2 に答える 2

3

このデモを試す 

function calculate() {
    var result = 0;
    $('input.input').each(function(index) {
        var inputValue = Number($(this).val());
        var valueP = Number($(this).next('p').text());
        result += inputValue * valueP;
//as you were adding here it will each time update the .bill
        console.log(result);
    });
    $('.bill').text(result);
}

$('.button').click(calculate);​

アップデート

それらを追加するだけでなく、すべての計算結果を表示するための デモ

function calculate()
{
   //var result = 0;
  $('input.input').each(function(index) {
  var inputValue = Number($(this).val());
  var valueP = Number($(this).next('p').text());
  var  result = inputValue * valueP;
  $('.bill').append(result+"<br/>");
  console.log(result);
});
}

$('.button').click(calculate);​
于 2012-10-27T09:08:14.517 に答える
1

これを試してください：

function calculate() {
    var result = 0;
    $('input.input').each(function(index) {
        var inputValue = Number($(this).val());
        var valueP = Number($(this).next('p').text());
        result += inputValue * valueP;
        $('.bill').append(result);
        console.log(result);
    });

}

$('.button').click(calculate);​
于 2012-10-27T09:34:16.147 に答える