jQuery- 为什么为全局变量赋值在函数中不起作用

jQuery- Why assigning a value to a global variable doesn't work inside a function?

本文关键字：函数 不起作用 赋值 为什么 全局变量 jQuery-      更新时间：2023-09-26

我正在构建一个带有 2 个按钮的滑块，以使数字升高/降低。这是jsfiddle。

这有效：

    var update_num;
    $('.plus').on('click', function() {
         update_num = $('output').text()*1;    
       if (update_num < 100) {
            $('output').text(update_num + 1);
        } else {
            $('output').text(100);
        }
        });
    $('.minus').on('click', function() {
        update_num = $('output').text()*1;          
        if (update_num > 0) {
            $('output').text(update_num - 1);
        } else {
            $('output').text(0);
        }
    });

但这不起作用：

    var update_num = $('output').text()*1;
    $('.plus').on('click', function() {
         if (update_num < 100) {
            $('output').text(update_num + 1);
        } else {
            $('output').text(100);
        }
        });
    $('.minus').on('click', function() {
        if (update_num > 0) {
            $('output').text(update_num - 1);
        } else {
            $('output').text(0);
        }
    });

为什么会这样，因为 var update_num 是全局的，所有其他函数都应该能够读取它？使这段代码干燥的最佳方法应该是什么？

这里的问题是update_num的值在第二个代码段中只设置一次。例如，如果其 2.然后，每次单击减号按钮时，值为 （2-1），单击加号按钮时的值为 （2+1）。update_num的值应随着每次按钮单击而更改。

你的问题是为什么给全局变量赋值不起作用。但在第二个代码中，从不通过单击按钮完成分配。试试这个： 

var update_num = $('output').text()*1;
$('.plus').on('click', function() {
     if (update_num < 100) {
        $('output').text(++update_num);
    } else {
        $('output').text(100);
    }
    });
$('.minus').on('click', function() {
    if (update_num > 0) {
        $('output').text(--update_num);
    } else {
        $('output').text(0);
    }
});

记住一件事，全局变量是危险的。假设您最初update_num为 34。依此类推$('.plus').on('click', function()值变为 35。但是，如果您再次单击，update_num将不会更改，因为它仅在var update_num = $('output').text()*1;处设置一次 没有双向绑定，这意味着如果您更改$('output').text()*1; update_num的值也会更改您可以搜索谷歌并了解有关two way binding或Observable Javascript Pattern的更多信息。

相关文章：