jquery - 基于 jQuery 中的 if 语句恢复事件

Question

我正在尝试创建一个用户可以选择门票的网站。门票有两种类型；一张成人门票和一张午餐票。门票有一些不同的条件。

1. 入场券不需要特定日期，因此用户可以直接进入结帐步骤。
2. 午餐券需要特定日期，因此如果选择午餐券，接下来应该显示日期步骤。
3. 没有门票就无法购买午餐票，因此会显示错误。

我有两个问题:

1. 如果用户首先选择午餐券，则会显示错误消息，这是正确的。如果用户选择成人票，也会显示日期步骤，这也是正确的。但是，错误消息仍然显示，这是错误的。
2. 如果用户选择了多个工单，则下一步将按其应有的方式显示，但是，如果用户将工单数设置回 0，则仍会显示下一步，但不应显示。

我的 JSFiddle: https://jsfiddle.net/mckeene/ysybh7wk/12/

HTML

<p id="error">
  Please select admission tickets aswell
</p>
<div class="adult">
  <p>
    Adult
  </p>
  <div class="col-xs-2">
    <p id="price-adult" data-price="12.77">€ 12.77</p>
  </div>
  <div class="col-xs-2">
    <select class="tickets-selection form-control" value="0" name="ticket-select-adult" id="ticket-select-adult">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <div class="col-xs-3">
    <p id="adult-total" class="text-right">
      <span class="valuta">€</span>
      <span class="total"></span>
    </p>
  </div>
</div>
<br>
<br>
<div class="lunch">
  <p>
    Lunch
  </p>
  <div class="col-xs-2">
    <p id="price-lunch" data-price="10.76">€ 10.76</p>
  </div>
  <div class="col-xs-2">
    <select class="tickets-selection form-control" value="0" name="ticket-select-lunch" id="ticket-select-lunch">
      <option value="0">0</option>
      <option value="1">1</option>
      <option value="2">2</option>
      <option value="3">3</option>
    </select>
  </div>
  <div class="col-xs-3">
    <p id="lunch-total" class="text-right">
      <span class="valuta">€</span>
      <span class="total"></span>
    </p>
  </div>
</div>
<br>
<br>
<div id="date">
  Date
</div>
<div id="checkout">
  Checkout
</div>

jQuery

$('#date').hide();
$('#checkout').hide();
$('#error').hide();

$(function() {
  var $adultTotal = $("#adult-total .total");
  var adultPrice = parseFloat($("#price-adult").data("price"));
  var $lunchTotal = $("#lunch-total .total");
  var lunchPrice = parseFloat($("#price-lunch").data("price"));
  var adultPriceTotal = 0;
  var lunchPriceTotal = 0;
  var adultTicketsFound = false;
  var lunchTicketsFound = false;

  // Fixes NaN and calculates the subtotal price for adult tickets
  $('#ticket-select-adult').change(function() {
    var adultTicketsCount = parseFloat(this.value, 10);
    adultPriceTotal = isNaN(adultTicketsCount) ?
      0 :
      (adultTicketsCount * adultPrice).toFixed(2);
    $adultTotal.text(adultPriceTotal);

    if (adultTicketsCount > 0) {
      adultTicketsFound = true;
    }

  });

  $('#ticket-select-lunch').change(function() {
    var lunchTicketsCount = parseInt(this.value, 10);
    lunchPriceTotal = isNaN(lunchTicketsCount) ?
      0 :
      (lunchTicketsCount * lunchPrice).toFixed(2);
    $lunchTotal.text(lunchPriceTotal);

    if (lunchTicketsCount > 0) {
      lunchTicketsFound = true;
    }
  });

  $("select").change(function() {
    if (lunchTicketsFound && !adultTicketsFound) {
      $('#checkout').hide('slow');
      $('#date').hide('slow');
      $('#error').show('slow');
    }

     else if (lunchTicketsFound) {
      $('#checkout').hide('slow');
      $('#date').show('slow');
    }

    else if (adultTicketsFound) {
      $('#checkout').show('slow');
      $('#error').hide('slow')
    }
  });
});

Answer 1

问题出在最后一个更改函数的逻辑上。代码永远不会转到最后一条语句，因为当条件 lunchTicketsFound 和 adultTicketsFound 都为 true 时，会执行第二个 if 语句，因为测试仅在lunchTicketsFound上进行。

在一个事件上触发多个代码块有时会造成困惑，因为您无法控制执行顺序。我能够通过将最后一个 JQuery 更改事件定义转换为名为 verifyTicket 的普通函数来修改您的解决方案。代码如下所示。

此外，我还更改了将“true”分配给 *ticketsFound 变量的代码。当有人按预期顺序单击所有内容，但随后将其中一个值更改回“0”时，这会处理这种情况。由于这些变量唯一设置为“false”的地方是在初始化期间，因此原始代码未能考虑多个更改:

$('#date').hide();
$('#checkout').hide();
$('#error').hide();

$(function() {
  var $adultTotal = $("#adult-total .total");
  var adultPrice = parseFloat($("#price-adult").data("price"));
  var $lunchTotal = $("#lunch-total .total");
  var lunchPrice = parseFloat($("#price-lunch").data("price"));
  var adultPriceTotal = 0;
  var lunchPriceTotal = 0;
  var adultTicketsFound = false;
  var lunchTicketsFound = false;

  // Fixes NaN and calculates the subtotal price for adult tickets
  $('#ticket-select-adult').change(function() {
    var adultTicketsCount = parseFloat(this.value, 10);
    adultPriceTotal = isNaN(adultTicketsCount) ?
      0 :
      (adultTicketsCount * adultPrice).toFixed(2);
    $adultTotal.text(adultPriceTotal);

    // Notice that this is shorthand for its equivalent if-then-else statement
    adultTicketsFound = (adultTicketsCount > 0);

    validateTickets();
  });

  $('#ticket-select-lunch').change(function() {
    var lunchTicketsCount = parseInt(this.value, 10);
    lunchPriceTotal = isNaN(lunchTicketsCount) ?
      0 :
      (lunchTicketsCount * lunchPrice).toFixed(2);
    $lunchTotal.text(lunchPriceTotal);

    lunchTicketsFound = (lunchTicketsCount > 0);

    validateTickets();
  });

  // Changed the JQuery event into a vanilla function
  validateTickets = function() {
    if (lunchTicketsFound && !adultTicketsFound) {
      $('#checkout').hide('slow');
      $('#date').hide('slow');
      $('#error').show('slow');
    } else if (!lunchTicketsFound && adultTicketsFound) {
      $('#checkout').hide('slow');
      $('#date').show('slow');
    } else if (!lunchTicketsFound && !adultTicketsFound) {
      $("#checkout").hide("slow");
      $("#error").hide("slow");
      $("#date").hide("slow");
    } else {
      $('#checkout').show('slow');
      $('#error').hide('slow');
    }
  }
});