jQueryのif文に基づくイベントを元に戻す

Question

ユーザーがチケットを選択できるサイトを作成しようとしています。チケットには2種類あります。大人の入場券とランチチケット。 チケットにはいくつかの条件があります。

1. 入場券には特定の日付が必要ないため、ユーザーはチェックアウト手順に直接進むことができます。
2. ランチチケットには特定の日付が必要なため、ランチチケットが選択されている場合は、次に日付ステップが表示されます。
3. 昼食券は入場券なしで購入することはできませんので、エラーが表示されるはずです。ユーザーが正しい最初のエラーメッセージが表示されているランチチケットを、選択した場合
   1. ：

   は、私は2つの問題を抱えています。ユーザーが大人のチケットを選択すると、日付ステップも表示されますが、これも正しいです。ただし、エラーメッセージは表示されていますが、間違っています。

4. ユーザーが多数のチケットを選択した場合、次のステップが表示されますが、ユーザーがチケットの数を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の両方の条件が真である場合、という文が実行され、というテストが実行されるのはlunchTicketsFoundであるため、コードは最後のステートメントには決して行きません。

1つのイベントで複数のコードブロックが発生すると、実行順序を制御できないため、時には混乱することがあります。私は最後のJQuery変更イベント定義をverifyTicketというバニラ関数に変換することで、ソリューションを修正することができました。コードを以下に示します。

また、* ticketsFound変数に 'true'を割り当てるコードを変更しました。これは、誰かがすべてを順番にクリックし、期待どおりにクリックした後、値の1つを '0'に戻す場合を処理します。これらの変数が「偽」に設定されている唯一の場所は、初期化中であるので、元のコードは、アカウントに複数の変更を取ることができなかった：

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