javascript - Jquery 单击返回一个值并在另一个函数中使用它

Question

我正在尝试计算 inc 并获取返回的值，以便稍后使用它。我正在从两个函数中获取值。函数实际上可以工作，如果我在函数中使用 console.log(inc) ，我会得到打印的值。但如果我在外面这样做，就像你在代码中看到的那样，我只会得到 0，或者更确切地说，什么也没有发生。如何返回该值并稍后在我的代码中使用它？

值 inc ，我从单击的按钮 + 和 - 获得。如果单击按钮，它们会向上或向下移动 -3 到 3 范围内的数字。

var zoomIn = $('.s-plus');
var zoomOut = $('.s-minus');
var inc = 0;

zoomIn.on('click', function positive() {
  inc = inc + 1;
  if (inc > 3) {
    return inc = inc - 1;
  }
})

zoomOut.on('click', function negative() {
  inc = inc - 1;
  if (inc < -3) {
    return inc = inc + 1;
  }
})

console.log(inc);

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-magnifier-container magnify">
  <div class="zoom">
    <span class="s s-plus"><span class="hide">zoom-in</span></span>
    <span class="s s-minus"><span class="hide">zoom-out</span></span>
  </div>
</div>

Answer 1

你的代码实际上没问题。但是，console.log() 仅在初始化时调用一次。如果您想查看更改，请将console.log()(或任何需要对更改使用react的函数)移至事件处理程序。

var zoomIn = $('.s-plus')
var zoomOut = $('.s-minus')
var resize = $('.resize')
var inc = 0

zoomIn.on('click', function positive() {
  inc = inc + 1;
  if (inc > 3) {
    inc = 3;
  }
  
  console.log(inc);
})

zoomOut.on('click', function negative() {
  inc = inc - 1;
  if (inc < -3) {
    inc = -3;
  }
  
  console.log(inc);
})

resize.on('click', function() {
  console.log(inc);
});

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="image-magnifier-container magnify">
  <div class="zoom">
    <span class="s s-plus"><span class="hide">zoom-in</span></span>
    <span class="s s-minus"><span class="hide">zoom-out</span></span>
  </div>
  
  <button class="resize">Resize</button>
</div>