Question

我正在构建一个带有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是全局的，所有其他函数应该能够读取它？什么应该是使此代码DRY的最佳方法？

Answer 1

此处的问题是 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);
    }
});

Answer 2

记住一件事，全局变量是危险的。假设您最初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。

jQuery-为什么为全局变量赋值并不在函数内部工作？

2 个答案: