jQueryのclickした時の処理で使用したローカル変数をグローバル変数として使用したい

###前提・実現したいこと
以下のコードで'#up'ボタン,'#down'ボタンで'p'の値を変更してajaxで'p'の値を渡すという処理がしたいのですが'p'の値が0でしか受け取れません

スコープの問題ということはわかっているのですがローカル変数（値の変更された'p'）をグローバル変数として扱う方法はありますか？

'p'の値がajaxで送信できれば方法は問わないので他の実装方法等がありましたらご教示頂きたいです,よろしくお願いします

###該当のソースコード

js
1var p = 0;
2$(document).on('click', '#up', function(){
3    p += 10;
4    var pv = p + "%"
5    $('.progress').css('width', pv)
6    $('.look_p').text(pv);
7});
8$(document).on('click', '#down', function(){
9    p -= 10;
10    var pv = p + "%"
11    $('.progress').css('width', pv)
12    $('.look_p').text(pv);
13});
14
15$(document).on('click', '.btn', function(){
16  $.ajax({
17    type: 'POST',
18    url: '/hange/' + p
19  });
20});

###補足情報
jQery3.2.1
'p'の値は更新できていることを確認しています
ajaxで値の受け取りもできています

行動規範の内容に同意します

回答1件

ベストアンサー

スコープの問題ということはわかっているのですが

スコープの問題ではないですね。関数の実行タイミングの問題かと。
class="btn" , id="up", id="down" がhtml上で、どのような構成になっているのか不明ですが、やりたいことは以下のようになるのでは？

html
1<!DOCTYPE HTML>
2<html lang="ja">
3	<head>
4		<meta charset="UTF-8">
5		<title></title>
6	</head>
7	<body>
8		<div>
9			<button class="up_down" data-num="10">UP</button>
10			<button class="up_down" data-num="-10">DOWN</button>
11		</div>
12		<script type="text/javascript" src="//code.jquery.com/jquery-3.1.1.min.js"></script>
13		<script type="text/javascript">
14			$(function () {
15				var p = 0;
16				$(".up_down").on('click', function () {
17					var num = parseInt($(this).attr("data-num"));
18					p += num;
19					alert('/hange/' + p);
20				});
21			});
22		</script>
23	</body>
24</html>