方法

Question

鉴于我有5个输入字段链接到他们自己的价格，我希望能够获取输入的值乘以其特定价格并将该值返回到dom。

这是正在呈现的，有5个具有独特的价格。我不确定如何将每个输入链接到其特定价格，添加所有5个输入的价格（如果有的话）并将它们发布在dom上。

我正在尝试获取data-price p标记的.class，循环浏览它们，将其链接到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

对于动态内容，请使用事件委派来绑定事件。

var db = new PouchDB('http://127.0.0.1:5984/spacedbs')
var aut = db.signUpAdmin('illegal', 'pass')

使用$(document).on('input', '.menu-class div[class="amount"] input[type="number"]', function() {...}事件来涵盖输入input的每项更改。

将Quantity应用于该部分。即：class

方法

基本上，循环切片并收集金额。

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

Answer 2

$('.amount input')返回与选择器匹配的所有dom元素的类数组对象。我相信$('.amount input').val();将从数组中的第一项返回值

您可能希望本地化查找输入，如下所示：

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

动态内容的总和值

2 个答案:

方法