javascript - jQuery 中的简单增量

Question

我想做的是一个简单的函数，使用 jQuery，它会根据您按下的按钮递增变量(A、B 或 C)。我不太擅长解释东西，所以让我向您展示我的代码，让您了解一下。

HTML:

A: <span id="a">0</span><br />
B: <span id="b">0</span><br />
C: <span id="c">0</span>
<div id="btn_holder">
  <button type="button" id="add_a">+1 A</button>
  <button type="button" id="add_b">+1 B</button>
  <button type="button" id="add_c">+1 C</button>
</div>

JS:

 var a = 0,
   b = 0,
   c = 0;

 function add(x, y) {
   x++;
   $('#' + y).html(x);
 }

 $('#btn_holder button').click(function() {
   var id = $(this).attr('id');
   switch (id) {
     case 'add_a':
       add(a, 'a');
       break;
     case 'add_b':
       add(b, 'b');
       break;
     case 'add_c':
       add(c, 'c');
       break;
   }
 });

这是 JSFiddle 的链接:https://jsfiddle.net/0drdu2bq/

现在，它有点工作了，但它似乎只运行一次函数(它加 1，然后按钮什么都不做)。我在这里缺少什么？

Answer 1

Javascript 使用按值而不是按引用传递参数。在您的代码中，使用变量 A 的值为 0 调用函数 add。此值存储在新的临时变量 X 中。X 递增 1 并将其值写入屏幕。当函数结束时，您所做的只是更改临时 X 的值，而不是 A 的值，因此它保持为 0。下次调用add函数时，再次传入A的值，仍为0，如此循环。

要修复代码，您已将代码从 add 函数中取出并放入 switch 语句中:

switch (id) {
    case 'add_a':
       $('#a').html(++a);
       break;
     case 'add_b':
       $('#b').html(++b);
       break;
     case 'add_c':
       $('#c').html(++c);
       break;
   }

请参阅此 fiddle 中的完整示例:https://jsfiddle.net/0drdu2bq/1/