Question

我需要创建一个表单，每个产品需要一个价格*数量，然后需要将它们全部添加到总计中。这是我到目前为止所拥有的。

$(document).ready(function(){

  $('.bone-burger').on('keyup', '.quantity1', function() {

     var price1 = +$(this).closest('.bone-burger').data('price');
     var quantity1 = +$(this).val();

     var amount1 = price1 * quantity1;




  $('.smoke-burger').on('keyup', '.quantity2', function() {

     var price2 = +$(this).closest('.smoke-burger').data('price');
     var quantity2 = +$(this).val();

     var amount2 = price2 * quantity2;

     var realtotal = amount1 + amount2;

     $('#total').text(realtotal);

   });

  });
});

这是一个JSFiddle

https://jsfiddle.net/jamesleetaylor/z3b1dL9v/

我只尝试连接前两项。在小提琴输入中，前两个项目中的数字除了在我的网站上（在铬中）之外什么都没有，它们在某种程度上起作用。

jamesleetaylor.com/voodoo

我已经搜索了很多寻找JavaScript表单的例子，但没有找到我需要的这个简单表单。

Answer 1

您的代码有几个问题。看看你的小提琴，我不确定你是否完全理解回调函数是如何工作的，因为你在其他事件处理程序的回调中添加了事件处理程序，即

$element.on('event', function() {
    // this callback function is executed when the event e.g. click happens
};

您的代码目前有：

$element1.on('event', function() {
   //do something 1
   $element2.on('event', function() {
     //do something else 2
   };

};

当我们使用代码缩进时，这变得更加明显，所以如果你还没有开始这样做的话！

确保查看HTML元素类和ID的用途。简而言之，类可以在许多元素上重复使用以表示样式或目的的共性，而ID是一个元素的唯一标识符。你的小提琴有几个具有相同id的元素，但是是唯一的类。

我已经为你做了一个简约的工作示例来演示解决这个问题的方法。

HTML：

<div>
    <span>Bone Burger</span>
    <p>28€</p>
    <input type="number" id="quantity1" data-price='28' placeholder="#" />
    <input type="number" id="total1" placeholder="total" disabled />
</div>

<div>
    <span>Smoke Burger</span>
    <p>29€</p>
    <input type="number" data-price='29' id="quantity2" placeholder="#" />
    <input type="number" id="total2" placeholder="total" disabled />
</div>

<p>Sub total: €<span id='subtotal'>0</span></p>

JS：

$(document).ready(function(){

  $('#quantity1').on('change keyup', function() {
    $this = $(this);
    var price1 = $this.data('price');
    var quantity1 = $this.val();
    var amount1 = price1 * quantity1;
    $('#total1').val(amount1);
    updateTotal();
  });

  $('#quantity2').on('change keyup', function() {
    $this = $(this);
    $('#total2').val($this.data('price') * $this.val());
    updateTotal();
  });
});

function updateTotal() {
    var subTotal = Number($('#total1').val()) + Number($('#total2').val());
    $('#subtotal').html(subTotal);
}

有一个jsFiddle here

我对您的HTML进行了一些小修改，主要是删除了与此示例无关的内容。

我已将数据价格转移到另一个元素上，首先是为了方便使用，其次是因为将它放在封闭的div上对我来说没什么意义。

我还为每个项目添加了一个总计输入。如果你想这样，可以通过添加＆＃34; hidden＆＃34;来隐藏最终用户。属性。

我还添加了一些id属性，可以帮助我们更多。

javascript相对简单。 document.ready函数仅用于添加我们的事件侦听器，每个输入一个。除了键盘之外，我还使用了更改事件，因为数字输入也可以使用输入旁边的小箭头进行更改。然后，我们从数据属性中获取价格，从元素本身获取数量，并将其应用于相关的总输入。

我为quantity2处理程序添加了一个更简洁版本的相同内容。

我们还在document.ready函数之外定义了一个updateTotal方法。这只是将总数加在一起，并将结果放在小计元素中。我们在事件处理程序中调用此updateTotal方法，因此每当用户更改某些内容时，总体更新也会更新。

任何问题都要求离开。

Answer 2

在提供的代码中，请注意您在第一个侦听器回调中添加了第二个 keyUp 侦听器。因此，如果您没有订购 Bone Burger （或更改了Bone Burger数量），您将无法订购 Smoke Burger 。

重构代码

您创建的两个 keyUp 侦听器执行相同的操作。他们使用具有相同结构的兄弟元素并进行相同的计算（使用不同的数据）。

您可以创建一个侦听器来处理订单中的每个项目。以此HTML代码为例。

<div class="form-group order-item" data-price='28'>
    <label class="label-text" for="b1in">Bone Burger</label>
    <input type="number" class="quantity" value='' placeholder="#" />
</div>
<div class="form-group order-item" data-price='29'>
    <label class="label-text" for="b1in">Smoke Burger</label>
    <input type="number" class="quantity" value='' placeholder="#" />
</div>

我将一个名为 order-item 的类添加到您拥有的不同form-group中。然后为两个（和更多）项创建一个侦听器。

$('.order-item').on('keyup', function () {
    updateTotal();
});

每次进行更改时，都会调用 updateTotal 函数。

编辑： jQuery允许我们收听更改事件而不是 onkeyup 。这允许我们使用输入的向上和向下箭头。在这种情况下，此代码可能更适合。

$('.order-item .quantity').change(function () {
    updateTotal();
});

更新总计

现在，我们需要创建 updateTotal 功能。它基本上是每个价格*数量

的总和

这可以这样做。

function updateTotal() {
    var total = 0;

    $('.order-item').each(function () { // Loop through items, 'this' is the current element
        var price = +$(this).data('price') || 0; // Retrieve the price
        var quantity = +$(this).find('.quantity').first().val() || 0; // Retrieve the quantity
        // The '|| 0' allows to set the variable to 0 if there is no price or quantity

        total += price * quantity; // Add that to the total
    });

    // After the loop, we display the new total
    $('#total').text(total);
}

＆＃13;

$(document).ready(function() {
  $('.order-item').on('keyup', function() {
    updateTotal();
  });

  function updateTotal() {
    var total = 0;

    $('.order-item').each(function() {
      var price = +$(this).data('price') || 0;
      var quantity = +$(this).find('.quantity').first().val() || 0;

      total += price * quantity;
    });

    $('#total').text(total);
  }
});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>

<body>


  <div class="m js-modal">
    <div class='modal-header'>
      <h2 class='modal-title'>Order Form</h2>
    </div>

    <div class='modal-conten'>
      <!-- <h4>Food</h4> -->

      <div class="voodoo-form">
        <!-- <button type="button" class="more btn btn-info">+</button> -->
        <form>


          <div class="form-group order-item" data-price='28'>
            <label class="label-text" for="b1in">Bone Burger</label>
            <div class="dollar">
              <p class='euro'>28€</p>
              <div class="spacer">
              </div>
              <input type="number" class="b1in quantity" value='' id="foodList" placeholder="#" />
            </div>
          </div>


          <div class="form-group order-item" data-price='29'>
            <label class="label-text" for="b2in">Smoke Burger</label>
            <div class="dollar">
              <p class='euro'>29€</p>
              <div class="spacer">
              </div>
              <input type="number" class="b2in quantity" value='' id="foodList" placeholder="#" />
            </div>
          </div>


          <div class="form-group order-item">
            <label class="label-text" for="b3in">Voodoo Burger</label>
            <div class="dollar">
              <p class='euro'>30€</p>
              <div class="spacer">
              </div>
              <input type="number" class="b3in quantity" value='' id="foodList" placeholder="#" />
            </div>
          </div>


          <div class="form-group order-item">
            <label class="label-text" for="d1in">Ayhuaska Sour</label>
            <div class="dollar">
              <p class='euro'>18€</p>
              <div class="spacer">
              </div>
              <input type="number" class="d1in quantity" value='' id="foodList" placeholder="#" />
            </div>
          </div>


          <div class="form-group order-item">
            <label class="label-text" for="d2in">Beyond the Pale</label>
            <div class="dollar">
              <p class='euro'>10€</p>
              <div class="spacer">
              </div>
              <input type="number" class="d2in quantity" value='' id="foodList" placeholder="#" />
            </div>
          </div>


          <div class="form-group order-item">
            <label class="label-text" for="d3in">Red</label>
            <div class="dollar">
              <p class='euro'>11€</p>
              <div class="spacer">
              </div>
              <input type="number" class="d3in quantity" value='' id="foodList" placeholder="#" />
            </div>
          </div>


          <div class="form-group order-item">
            <label class="label-text" for="d4in">White</label>
            <div class="dollar">
              <p class='euro'>11€</p>
              <div class="spacer">
              </div>
              <input type="number" class="d4in quantity" value='' id="foodList" placeholder="#" />
            </div>
          </div>


        </form>
      </div>
    </div>
    <div class="modal-footer">
      <button type="button" class="submit-order btn btn-default">Place Order</button>


      <p>Sub total: €<span id='subtotal'>0</span>
      </p>
      <p>Total: €<span id='total'>0</span>
      </p>



    </div>
  </div>

＆＃13;

Answer 3

＆＃13;

$("input").keyup(function () {
    var pr = $(this).data("price");
    var name = $(this).data("name");
    var qut = $(this).val();
    var total = pr * qut;
    $("#"+name).text(total);
});
$("#placeorder").click(function () {
    var total = 0;
    $('.t').each(function () {
        total += Number($(this).text());
    });
    $('#total').text(total);
});

＆＃13;

.t{
    border:0px solid;
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<table>
    <tr>
        <td>Bone Burger:</td>
        <td><input type="text" data-name="gold" data-price="28" size="1" /></td>
        <td><label id="gold" class="t" readonly ></label></td>
    </tr>
    <tr>
        <td>Smoke Burger:</td>
        <td><input type="text" data-name="sakti" data-price="29" size="1" /></td>
        <td><label id="sakti" class="t" readonly ></label></td>
    </tr>   
    <tr>
        <td>Voodoo Burger:</td>
        <td><input type="text" data-name="taja" data-price="30" size="1" /></td>
        <td><label id="taja" class="t" readonly ></label></td>
    </tr>  
    <tr>
        <td>Ayhuaska Sour:</td>
        <td><input type="text" data-name="gay" data-price="18" size="1" /></td>
        <td><label id="gay" class="t" readonly ></label></td>
    </tr>
    <tr>
        <td>Beyond the Pale:</td>
        <td><input type="text" data-name="chhash" data-price="10" size="1" /></td>
        <td><label id="chhash" class="t" readonly ></label></td>
    </tr>  
    <tr>
        <td>red:</td>
        <td><input type="text" data-name="red" data-price="11" size="1" /></td>
        <td><label id="red" class="t" readonly ></label></td>
    </tr>
    </tr>
    <tr>
        <td>White:</td>
        <td><input type="text" data-name="White" data-price="11" size="1" /></td>
        <td><label id="White" class="t" readonly ></label></td>
    </tr>
    <tr>
        <td>
            <button id="placeorder">Place order</button>
        </td>
    </tr>
    <tr>
        <td><p>Total:<span id="total"></span></p></td>
    </tr>
</table>

＆＃13;

用计算创建一个简单的jQuery表单

3 个答案:

重构代码

更新总计