1

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

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

但是，在提交按钮附近的底部，我想显示总价以及他们订购的商品。有没有一种使用 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>
4

2 回答 2

0

假设您在每次数量值更改时计算总计，您可以在计算总计的函数内部检查数量值并采取相应措施：

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();
于 2013-04-15T08:07:17.503 回答
0

我会提出一个建议，而不是为每个输入查看不同的元素，而是将标题文本存储为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/

于 2016-10-17T04:14:36.810 回答