onClickのJquery/Javascriptインクリメントデクリメントグローバル変数

Question

お客様がイベントチケットをチェックアウトできるイベントサイトを構築しています。だから私は顧客がチケットの数を選択しなければならないイベントページを持っています。次のページでは、チケットの枚数ごとに座席を選択する必要のある座席図があります。

これで、お客様がイベントページ、つまりticket_quantity = 5で5枚のチケットを選択し、座席の地図ページに到達するとします。私がしようとしていることは、顧客が座席マップ上のボタンをクリックし、seats_selectedがticket_quantityと等しい場合、チェックアウトボタンのみが有効になり、条件がticket_quantity！= seats_selectedまたはseats_selected> ticket_quantityまたはseats_selected < ticket_quantityのときに無効にする必要があります。

私はこのためのスクリプトを持っていますが、何とか動作していないか、部分的に動作しています。スクリプトでは、totalSeatsはseatsSelectedの数を保持するグローバル変数であり、条件を確認するために使用されます。 'サムネイル'は、「サムネイルを選択」に切り替えるクラスです。

<script> 
    var totalSeats = 0; 
    $('.thumbnail:not(.unavailable)').click(function(){ 
     $(this).toggleClass('selected').length; 
     totalSeats++; 

     if ({{ticket_quantity}} == totalSeats) { 
      $("#button-checkout").prop("disabled", false); 
     } 

     if ({{ticket_quantity}} != totalSeats) { 
      //totalSeats--; 
      $("#button-checkout").prop("disabled", true); 
     } 

    }); 
</script> 

問題：= tickets_quantity seats_selectedときにはボタンが有効になります。しかし、私がseats_selectedを増やしてからそれを減らすと（例えば：seats_selected = 6そしてそれを再び5に減らすと、それはチェックアウトボタンを有効にしません）。問題は上記のスクリプトのtotalSeatsの数です。 onClickイベントが発生すると、いつでも '1'が追加されます。だからonClickごとにtotalSeatsの数に1を加えています。私はtotalSeats--を試しましたが、それは助けにはなりません。スクリプトの何が間違っているのでしょうか？ありがとう.. !!

Answer 1

増加または減少する必要がありますが、増減は減少します。

<script> 
    var totalSeats = 0; 
    $('.thumbnail:not(.unavailable)').click(function(){ 
     $(this).toggleClass('selected'); 
     if ($(this).hasClass('selected')){ 
      if ({{ticket_quantity}} != totalSeats) { 
       totalSeats--; 
       $("#button-checkout").prop("disabled", true); 
      } 
     } else { 
      if ({{ticket_quantity}} < totalSeats) { 
       totalSeats++; 
      } 

      if ({{ticket_quantity}} == totalSeats) { 
       $("#button-checkout").prop("disabled", false); 
      } 
     } 

    }); 
</script> 

totalSeatsが減少するたびに、このバグに気づきましたか？

Answer 2

単にクリックハンドラの内部

var totalSeats = $(".selected").length; 

を取得します。

---

それとも、クラスが設定または削除された場合てmanualyチェックする必要があります。

if($(this).hasClass("selected")){ 
    $(this).removeClass("selected"); 
    totalSeats--; 
}else{ 
    $(this).addClass("selected"); 
    totalSeats++; 
}