Question

我有电影院座位模型的页面。用户选择座位并且实时价格正在显示。下一步是去结账，但如果用户改变主意并希望更改为不同的座位并点击浏览器，则返回到座位选择页面。我设法通过使用会话ID检查来保持选定的座位。但是不能保存价格。

$(document).ready(function () {
var $inputs = $('.seats-c');
var $output_seats = $('#span-seats');
var $output_price = $('#span-price');
var $output_taxes = $('#span-taxes');
var $output_tot_price = $('#span-tot-price');
var input_val;
var seats_list_json;
var seats_list;
var seats;
var price;
var taxes;
var last_entered;
$inputs.on('click', function () {
    last_entered = this;
});
$inputs.on('change', function () {
    seats_list_json = $('#seatsList').val();
    seats_list = JSON.parse(seats_list_json);
    seats = 0;
    price = 0;
    taxes = 13; //%
    $inputs.each(function () {
        input_val = this.value;
        if (this.checked) {
            seats += 1;
            $.each(seats_list, function (key, value) {
                if (input_val === key) {
                    price += value;
                }
            });
        }
        if (seats > 4) {
            $(last_entered).prop("checked", false);
            box(null, "Warning !", "Maximum amount is 4 seats per transaction", "alert-box");
        }
    });
    $output_seats.html(seats);
    $output_price.html(price);
    $output_taxes.html(taxes + "% taxes = $" + (price * (taxes / 100)).toFixed(2));
    $output_tot_price.html((price * ((taxes / 100) + 1)).toFixed(2));
}); });

Answer 1

我认为你的问题仍然不明确。但根据我的理解，您可以实施以下变更。

将您的计算价格与功能分开。如下calculatePrice。

现在在pageLoad和change复选框上调用相同的功能。

在pageLoad上也可以调用相同的功能来获取document.ready上的更新价格。

以下示例代码可以帮助您。

＆＃13;

$(document).ready(function() {
  var $inputs = $('.seats-c');
  var $output_seats = $('#span-seats');
  var $output_price = $('#span-price');
  var $output_taxes = $('#span-taxes');
  var $output_tot_price = $('#span-tot-price');
  var input_val;
  var seats_list_json;
  var seats_list;
  var seats;
  var price;
  var taxes;
  var last_entered;

  seats_list = [{
      ch_1: 100
    },
    {
      ch_2: 20
    },
    {
      ch_3: 20
    },
    {
      ch_4: 20
    },
    {
      ch_5: 20
    }
  ];

  function calculatePrice() {

    seats = 0;
    price = 0;
    taxes = 13; //%
    $inputs.each(function() {
      input_val = this.id;
      if (this.checked) {
        seats += 1;;
        $.each(seats_list, function(key, value) {

          if (value.hasOwnProperty(input_val)) {
            price += value[input_val];
          }
        });
      }
    });
    $output_seats.html(seats);
    $output_price.html(price);
    $output_taxes.html(taxes + "% taxes = $" + (price * (taxes / 100)).toFixed(2));
    $output_tot_price.html((price * ((taxes / 100) + 1)).toFixed(2));
  }


  calculatePrice();

  $inputs.on('click', function() {
    last_entered = this;
  });
  $inputs.on('change', function() {
    calculatePrice();
  });

});

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>

<input type="checkbox" id="ch_1" class="seats-c" checked/>
<input type="checkbox" id="ch_2" class="seats-c" checked/>
<input type="checkbox" id="ch_3" class="seats-c" />
<input type="checkbox" id="ch_4" class="seats-c" />
<input type="checkbox" id="ch_5" class="seats-c" />
<br/> -seats- <span id="span-seats"></span>
<br/> -price- <span id="span-price"></span>
<br/> -taxes- <span id="span-taxes"></span>
<br/> -total- <span id="span-tot-price"></span>
<br/>

＆＃13;

如何在页面加载时评估已经选中的框的值？

1 个答案: