从函数修改全局变量

时间:2018-06-07 11:31:07

标签: jquery

我是jQuery的新手,我需要一些帮助。 我有3个变量,a,b和c。 C是a b的总和。

$( document ).ready(function() {
var a = 0;
var b = 0;
var c = (a+b);
console.log(c);
$('#x').click(function(){
  if ( $('#x').hasClass('selected') && a < 2 && c < 4) { 
    a++;
  } 
  console.log(a);
});

$('#y').click(function(){
  if ( $('#y').hasClass('selected') && b < 2 && c < 4) { 
    b++;
  } 
  console.log(b);
});
  $('#total').html(c);
    
});  
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="x" class="selected"> A </button>
<button id="y" class="selected"> B </button>
<p id ="total">0</p>

我不知道在点击功能改变A和B之后代码如何更新C变量(如果我预定义A例如值为3我得到C的核心值)。

2 个答案:

答案 0 :(得分:1)

您的代码不会重新计算您的变量,因此您需要执行以下操作:

    $( document ).ready(function() {
      var a = 0;
      var b = 0;
      var c = 0;
      console.log('C = '+c);
      $('#x').click(function(){
        if ( $('#x').hasClass('selected') && a < 2 && c < 4) { 
          a++;
        } 
        console.log('A = '+a);
        show();
      });

      $('#y').click(function(){
        if ( $('#y').hasClass('selected') && b < 2 && c < 4) { 
          b++;
        } 
        console.log('B = '+b);
        show();
      });
    
      function show() {
        c = a + b;
        console.log('C = '+c);
        $('#total').html(c);    
      }
        
    }); 

 
   

 <script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
    <button id="x" class="selected"> A </button>
    <button id="y" class="selected"> B </button>
    <p id ="total">0</p>

您需要调用一个函数来重新计算C并显示它。

答案 1 :(得分:0)

您的代码存在的问题是,单击按钮时未更改c。您只需添加ab,然后在每个点击处理程序中设置p标记的html。或者在每个处理程序中为a + b指定c,然后将c的值设置为p标记。

在下面的例子中,我使用了前一种方法。

$(document).ready(function() {
  var a = 0;
  var b = 0;
  var c = (a + b);

  $('#x').click(function() {
    if ($('#x').hasClass('selected') && a < 2 && c < 4) {
      a++;
    }

    $('#total').html(a + b);
  });

  $('#y').click(function() {
    if ($('#y').hasClass('selected') && b < 2 && c < 4) {
      b++;
    }

    $('#total').html(a + b);
  });
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button id="x" class="selected"> A </button>
<button id="y" class="selected"> B </button>
<p id="total">0</p>

相关问题