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

【问题标题】：Jquery/Javascript increment-decrement global variable on onClickonClick 上的 Jquery/Javascript 递增-递减全局变量
【发布时间】：2017-08-10 17:35:13
【问题描述】：

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

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

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

<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 = ticket_quantity 时，它启用按钮。但是当我增加 seat_selected 然后减少它（例如：seats_selected=6 然后再减少到 5，它没有启用结帐按钮）。问题是上述脚本中的总座位数。每当 onClick 事件发生时，它都会添加“1”。因此，在每次点击时，它都会将 totalSeats 计数加 1。我尝试了 totalSeats-- ;，但它没有帮助。知道脚本有什么问题吗？谢谢..!!

【问题讨论】：

标签： javascript jquery global-variables increment decrement

【解决方案1】：

简单搞定

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

在点击处理程序内部。

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

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

【讨论】：

是的，这行得通。非常感谢。由于我选定班级的 html 页面上的图例，它占据了 2 个座位。对你的答案投了赞成票。
@jjs 很高兴为您提供帮助 ;)
只要使用$(this).toggleClass('selected');
@claudio santos 我为什么要这样做？
避免使用添加和删除类。

【解决方案2】：

你需要增加或减少，但你是增加和增加减少。

<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 的计数。它不会先进入 if 函数，因此它永远不会增加 totalSeats 数。
谢谢。我试过这段代码。控制台中没有错误，但不知何故对我不起作用。 @Jonas 提到的“var”对我有用。