Question

我正在尝试获取各种可用门票的总金额。从选择框中，用户可以选择他想要的票数。最后，总金额会显示出来。我的问题是，在更改门票数量的选择时，它会被添加到之前的总数中。我想扣除它，然后添加正确的金额。我有这个运行代码。

这是我的html。

<form>
<div class="row">
  <div class="col-xs-12 col-sm-4">
     <label>OAP</label>
  </div>
  <div class="col-xs-12 col-sm-4">
     <select class="venet-stock" data-price="20">
        <option value="1">
           1                                                
        </option>
        <option value="2">
           2                                                
        </option>
        <option value="3">
           3                                                
        </option>
        <option value="4">
           4                                                
        </option>
        <option value="5">
           5                                                
        </option>
        <option value="6">
           6                                                
        </option>
     </select>
  </div>
  <div class="col-xs-12 col-sm-4">
     <p class="number">
        £<span>20</span>
     </p>
  </div>
  </div>
   <div class="row">
      <div class="col-xs-12 col-sm-4">
      <label>General</label>
  </div>
  <div class="col-xs-12 col-sm-4">
     <select class="venet-stock" data-price="35">
        <option value="1">
           1                                                
        </option>
        <option value="2">
           2                                                
        </option>
        <option value="3">
           3                                                
        </option>
        <option value="4">
           4                                                
        </option>
        <option value="5">
           5                                                
        </option>
        <option value="6">
           6                                                
        </option>
     </select>
  </div>
  <div class="col-xs-12 col-sm-4">
     <p class="number">
        £<span>35</span>
     </p>
  </div>
</div>
       <div class="row">
          <div class="col-xs-12 col-sm-4">
             <label>Concession</label>
          </div>
      <div class="col-xs-12 col-sm-4">
         <select class="venet-stock" data-price="50">
        <option value="1">
           1                                                
        </option>
        <option value="2">
           2                                                
        </option>
        <option value="3">
           3                                                
        </option>
        <option value="4">
           4                                                
        </option>
        <option value="5">
           5                                                
        </option>
        <option value="6">
           6                                                
        </option>
     </select>
  </div>
  <div class="col-xs-12 col-sm-4">
     <p class="number">
        £<span>50</span>
     </p>
  </div>
   </div>
   <p class="push h20"></p>
   <div class="row">
  <div class="col-xs-12 col-sm-4">
     <label>Total</label>
  </div>
       <div class="col-xs-12 col-sm-4">
         <p class="total">
            £<span id="price-total">50</span>
         </p>
  </div>

这是我的Jquery代码。

var price_total = 0;
jQuery( '.venet-stock' ).change(function() {
    price = jQuery(this).attr('data-price');
    guest = jQuery( this ).val();
    price_total += guest*price;
    jQuery( '#price-total').text( price_total );
});

提前致谢。

Answer 1

工作小提琴https://jsfiddle.net/t3vs4dgx/

HTML代码。每个下拉列表只添加一个Zero选项。

<form>
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <label>OAP</label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <select class="venet-stock" data-price="20">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
    </div>
    <div class="col-xs-12 col-sm-4">
      <p class="number">£<span>20</span></p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <label>General</label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <select class="venet-stock" data-price="35">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
    </div>
    <div class="col-xs-12 col-sm-4">
      <p class="number">£<span>35</span></p>
    </div>
  </div>
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <label>Concession</label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <select class="venet-stock" data-price="50">
        <option value="0">0</option>
        <option value="1">1</option>
        <option value="2">2</option>
        <option value="3">3</option>
        <option value="4">4</option>
        <option value="5">5</option>
        <option value="6">6</option>
      </select>
    </div>
    <div class="col-xs-12 col-sm-4">
      <p class="number">£<span>50</span></p>
    </div>
  </div>
  <p class="push h20"></p>
  <div class="row">
    <div class="col-xs-12 col-sm-4">
      <label>Total</label>
    </div>
    <div class="col-xs-12 col-sm-4">
      <p class="total">£<span id="price-total">0</span></p>
    </div>
  </div>
</form>

JS代码。在更改一个选项时进行所有选择并为此次运行添加price_total

$( '.venet-stock' ).change(function() {
    var price_total = 0;
    $( '.venet-stock' ).each(function(i,e){
      price = $(e).attr('data-price');
      guest = $(e).val();
      price_total += guest*price;
    });
    jQuery( '#price-total').text( price_total );
});

更改选择的总值以查找总计

1 个答案: