javascript - 动态内容的总和值

Question

鉴于我有 5 个与各自价格相关联的输入字段，我希望能够获取输入值与其具体价格的乘积，并将该值返回给 dom。

这就是正在渲染的内容，有 5 个具有独特的价格。我不确定如何将每个输入链接到其具体价格，添加所有 5 个输入的价格(如果有的话)并将它们发布到 dom 上。

我正在尝试获取 .class p 标记的 data-price，循环它们，将其链接到它们的 input添加总和并将总和发布到 dom

<section data-itemid="${menuObj.id}">
  <div class="amount">
    <input type="number" placeholder="Quantity" min="0" name="${menuObj.id}">
  </div>
  <div class="item">
    <h1>${menuObj.name}</h1>
    <p class="food">${menuObj.description}</p>
    <p class="price" data-price="${menuObj.price}">${menuObj.price}</p>
  </div>
</section>

我让它为一个人工作，但不知道如何让他们为所有人工作

$(function() {
  $('input').on('keyup', function() {
    var input = $('.amount input').val();
    var price = $('.price').data('price');
    var final = $('.finalprice p');
    var total = input * price;
    final.text(total);
  });
})

Answer 1

对于动态内容，请使用事件委托(delegate)来绑定(bind)事件。

$(document).on('input', '.menu-class div[class="amount"] input[type="number"]', function() {...}

使用input事件来覆盖输入Quantity上的每个更改。

将类应用于该部分。即:.menu-class

方法

基本上，循环该部分并收集金额。

var total = 0;
$('.menu-class').each(function() {
  var $section = $(this);
  var input = $section.find('div.amount [type="number"]').val();
  var price = $section.find('.price').data('price');

  total += (input * price);      
});

$finalPrice.text(total);

片段

$(function() {
  var $finalPrice = $('.finalprice p');
  $finalPrice.on('calculate', function() {
    var total = 0;
    $('.menu-class').each(function() {
      var $section = $(this);
      var input = $section.find('div.amount [type="number"]').val();
      var price = $section.find('.price').data('price');

      total += (input * price);
    });

    $finalPrice.text(total);
  });

  $(document).on('input', '.menu-class div[class="amount"] input[type="number"]', function() {
    $finalPrice.trigger('calculate');
  });
});

<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<section class='col-md-6 col-xs-6'>
  <section class='menu-class' data-itemid="111">
    <div class="amount">
      <input type="number" placeholder="Quantity" min="0" name="quant_111">
    </div>
    <div class="item">
      <h1>My Meat :-)</h1>
      <p class="food">Meat</p>
      <p class="price" data-price="1000.0">1,000.00</p>
    </div>
  </section>
  <hr>
  <section class='menu-class' data-itemid="112">
    <div class="amount">
      <input type="number" placeholder="Quantity" min="0" name="quant_112">
    </div>
    <div class="item">
      <h1>My bread :-)</h1>
      <p class="food">Bread</p>
      <p class="price" data-price="2000.0">2,000.00</p>
    </div>
  </section>
</section>
<section class='col-md-6 col-xs-6'>
  <section class='finalprice'>
    <h1>Final price</h1>
    <p>
    </p>
  </section>
</section>