从jQuery函数传递增加/减少的数据？

Question

我已经创建了这个jQuery代码，通过点击“Next”按钮，它将数字增加8（8,16,32 ...），如果你点击按钮“Previous”，它将数字减少8（所以如果你输入Next两次，数字将是16;如果按下Previous，数字将是8）。

我必须通过两个函数传递这个。我的代码中的问题是没有传递数据？知道为什么吗？

这是我的代码：

var clicks = 0; 
$(function(){

    $("#btn2").click(function(){ 
      clicks=clicks+8; 
    });

    $("#btn1").click(function(){ 
        clicks = clicks <= 0 ? clicks : clicks - 8; 
    });

    var test = test2(clicks);

});

var test2 = function(test3){
    return test3;
}

$(function(test3){

    $('#result').html(test3);

});

我还创建了jsFiddle：http://jsfiddle.net/jtw05ff0/1/

真的感谢您的帮助

Answer 1

没有传递数据，因为您没有在点击时执行该功能。

请参阅下面的代码片段中的答案。

＆＃13;

＆＃13;

$(document).ready(function() {

  var clicks = 0;

  var test2 = function(data) {
      // Do something
      return data;
    }
  
  // Chain your jQuery calls! :)
  $("#btn2").mouseenter(function() {
      $(this).fadeTo('fast', 1);
    })
    .mouseleave(function() {
      $(this).fadeTo('fast', 0.5);
    })
    .click(function() {
      clicks = clicks + 8;
      var test = test2(clicks);
      $('#result').html(test);
    });

  $("#btn1").mouseenter(function() {
      $(this).fadeTo('fast', 1);
    })
    .mouseleave(function() {
      $(this).fadeTo('fast', 0.5);
    })
    .click(function() {
      clicks = clicks <= 0 ? clicks : clicks - 8;
      var test = test2(clicks);
      $('#result').html(test);
    });

  $('#result').html(test2(clicks));

});

＆＃13;

.btn {
  float: left;
  padding: 10px 20px;
  border-right: 1px #fff solid;
  color: #fff;
  text-decoration: none;
  background-color: #ccc;
  opacity: 0.5;
  border-radius: 5px;
  cursor: pointer
}

＆＃13;

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div><a class="btn" id="btn1">Previous</a>
</div>
<div><a class="btn" id="btn2">Next</a>
</div>
<br/>
<br/>
<br/>
<div id="result"></div>

＆＃13;

＆＃13;

＆＃13;