基于jQuery中的if语句还原事件

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

入场券不需要特定日期，因此用户可以直接进入结帐步骤

午餐票需要特定的日期，因此，如果选择了午餐票，则日期步骤应显示next（下一步）

没有入场券就不能购买午餐券，因此应显示错误

我有两个问题：

如果用户首先选择午餐票，则会显示错误消息，这是正确的。如果用户随后也选择了成人票，则会显示日期步骤，这也是正确的。但是，错误消息仍在显示，这是错误的

如果用户选择了一定数量的票证，则下一步将按其应显示的方式显示，但是如果用户将票证数量设置回0，则下一步仍将显示，但不应显示

我的朋友：

HTML

---

问题在于最后一个更改功能的逻辑。代码永远不会转到最后一条语句，因为当两个条件

午餐券找到

和

adultTicketsFound

都为真时，将执行第二条

if

语句，因为测试仅在

午餐券找到

上进行

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

此外，我还修改了将*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');
    }
  }
});

---

有一种验证方法，而不是每次更改都有一种。将所有更改事件连接到该方法。您可以重新渲染整个部分，并提供布尔值，以确定是否需要显示或隐藏元素，而不是尝试在DOM中显示/隐藏状态。

$('#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')
    }
  });
});

$('#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');
    }
  }
});