Question

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

入场券不需要特定日期，因此用户可以直接进入结账步骤。
午餐券需要特定日期，因此如果选择了午餐券，则应显示日期步骤。
如果没有入场券，则无法购买午餐券，因此应显示错误。

我有两个问题：

如果用户首先选择午餐券，则会显示错误消息，这是正确的。如果用户然后选择成人票也显示日期步骤，这也是正确的。但是，错误消息仍然显示，这是错误的。
如果用户选择了多个故障单，则下一步显示应该显示，但是如果用户将故障单数量设置为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都为真时，执行第二个if语句，因为测试是仅限于lunchTicketsFound。

在一个事件上触发多个代码块有时会使事情混乱，因为您无法控制执行顺序。通过将最后一个JQuery更改事件定义转换为名为verifyTicket的vanilla函数，我能够重新设计您的解决方案。代码如下所示。

另外，我更改了为* ticketsFound变量指定'true'的代码。这可以解决当有人按顺序和预期点击所有内容时的情况，但随后将其中一个值更改回“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');
    }
  }
});

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

1 个答案: