HTML：

Question

我有一套相当直接的输入用于下订单。

基本上，它会为它们计算数量*价格。

但是，在提交按钮附近的底部，我想显示总价格加上他们订购的商品。有没有办法使用JQuery或类似的，我基本上可以回显出他们在数量字段中放置了数字的项目的相关h6内容？

我的总费用已经很好了。

<tr>
    <td>
        <h6>Title</h6>Text.
    </td>
    <td id="price_item_1" class="menuprice">$PRICE</td>
    <td class="quantitynum">
        <input type="text" name="qty_item_1" id="qty_item_1" value="0" />
    </td>
    <td id="total_item_1" class="runningtl"></td>
</tr>

Answer 1

假设您每次计算数量值时计算总数，您可以做的是在计算总数的函数内部，检查数量值，并采取相应的行动：

if (quantity > 0)
   $("h6").show(); // assuming there is only one h6 in the page, otherwise you have to add ids to each h6
else
   $("h6").hide();

Answer 2

我要做的一个建议，而不是查看每个输入的不同元素，将标题文本存储为input本身的属性。 title属性非常适用于此。

考虑到这一点，以下代码片段应该有效：

HTML：

为了清晰起见，

略微简化。我已经在表单，输入和摘要元素中添加了类。

<form class="order-form">
  <table>
    <tr>
      <td><input type="number" class="quantity" title="Product 1"/></td>
    </tr>
    <tr>
      <td><input type="number" class="quantity" title="Product 2"/></td>
    </tr>
    <tr>
      <td><input type="number" class="quantity" title="Product 3"/></td>
    </tr>
  </table>
  <div class="order-form-summary"></div>
</form>

的Javascript：

$(function(){
  // Find all of the DOM elements we're interested in:
  var form = $('form.order-form'),
      output = form.find('.order-form-summary'),
      inputs = form.find('input.quantity');

  // Bind a custom event handler to the form, that collects the titles from the
  // inputs with a value > 0
  form.bind('updateSummary', function(){

    // Collect the titles into an array
    var summaries = $.map(inputs, function(e){
      var input = $(e);
      if (parseInt(input.val()) > 0){
        return input.attr('title');
      }
    });

    // Update the output element's HTML with the array, joined to a string with commas.
    output.html(summaries.join(', '));
  });

  // Fire the update event whenever chance, key-up or blur occurs on any input
  inputs.on('change keyup blur', function(){form.trigger('updateSummary')});

  // Fire it on load to get the correct starting values (in case any inputs are already filled)
  form.trigger('updateSummary');
});

这段代码可以简化，但我的目的是让它可读。这是一个小例子：https://jsfiddle.net/ejwLy5x8/

回声输入项

2 个答案:

HTML：

的Javascript：