onClick上的jQuery/Javascript增量递减全局变量

Question

我正在构建一个活动网站，客户可以在其中签出活动门票。所以我有活动页面，客户必须选择票数。在下一页中，我有一个座位图，客户必须根据票数选择座位。

现在，让客户在活动页面上选择5张门票，即ticket_quantity = 5并到达座位图页面。我想要做的是，当客户点击座位图上的按钮并且seat_selected等于ticket_quantity时，只有结帐按钮将被启用，否则当条件为ticket_quantity！= seats_selected或seats_selected> ticket_quantity或seats_selected < ticket_quantity时，它应该被禁用。

我有这个脚本，但不知何故它不工作或部分工作。在脚本中，totalSeats是全局变量，它将保持seatSelected计数，然后它将用于检查条件。 'thumbnail'是一个类别，它将切换到'缩略图选择'在座位图上选择座位，反之亦然。

<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> 

问题：它使按钮seats_selected = tickets_quantity时。但是，当我增加seat_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++; 
}