Question

我正在建立一个活动网站，客户可以在这里查看活动门票。所以我有一个活动页面，客户必须选择门票数量。在下一页，我有一张座位图，顾客必须根据门票数量选择座位。

现在，让我们说客户在活动页面上选择5张票，即ticket_quantity = 5并到达座位图页面。我想要做的是，当客户点击座位图上的按钮并且seat_selected等于ticket_quantity时，只有checkout按钮将被启用，否则当条件为ticket_quantity时，应该禁用它！= seat_selected或seats_selected＆gt; ticket_quantity或seats_selected＆lt; 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>

问题：当seat_selected = tickets_quantity时启用按钮。但是当我增加seat_selected然后减少它（例如：seat_selected = 6然后再将它减少到5时，它不会启用结帐按钮）。问题是上面脚本中totalSeats的数量。它会在onClick事件发生时随时添加“1”。所以在每个onClick上，它都会增加1来计算totalSeats。我尝试了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;

点击处理程序内部。

或者您可能需要检查是否已设置或删除该类：

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

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

2 个答案: