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

方法1

而不是

add(a, 'a');

把

$('#a').html(a++);

否则，a不会被更改。在x之后，只有局部变量a会增加0为add(a, 'a');。

方法2

如果您想使用您的功能，您可以返回递增的值：

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

然后按以下方式使用它：

a = add(a, 'a');

Answer 2

您可以使用一个对象来保存a，b，c的值，并使用这些字母作为对象的键

＆＃13;

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

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
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>

＆＃13;

Answer 3

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

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

docker pull ruby:2.2.4
docker run -it -v $PWD:/code ruby:2.2.4 bash

请参阅此小提琴中的完整示例：https://jsfiddle.net/0drdu2bq/1/

jQuery中的简单增量

3 个答案: