JSP:在html代码中获取js（jquery）变量（二）

继上一篇文章后，我又有了新的需求。
还是要获取js变量，还是熟悉的局部变量无法获取

这是购物数量加减图片和一个span标签用于显示数量，我就想得到span标签之间的值

<img class="fl decrement" src="img/temp/sub.jpg">
<span class="fl buynum" contentEditable="true" name="buynum" id="buynum">1</span>
<img class="fl increment" src="img/temp/add.jpg">

我写了购买数量的加减函数，对span之间的文本内容做出了改变，所以不能像上一篇文章那样在两个加减函数里写上html代码。
解决办法是再写一个函数，定义一个变量，获取span之间最终文本，然后在这个函数里实现页面跳转传值。点击“立即购买”的时候就触发这个函数
代码如下：

<script type="text/javascript">

var buynum = 1;		
				
// 1.增加商品数量模块 首先声明一个变量，当我们点击+号（increment），就让这个值++，然后赋值给span文本框。
//当点击+图标时，执行加函数
$(".increment").click(function() {
var n = $(this).siblings(".buynum").text();// 得到当前兄弟span文本框的值
console.log(n);
n++;
$(this).siblings(".buynum").text(n);//把n赋值给span之间文本
					        
buynum = $('.buynum').text();//获取购买数量
console.log("获取到购买次数了"+buynum);
});

// 2.减少商品数量模块 首先声明一个变量，当我们点击-号（decrement），就让这个值--，然后赋值给span文本框。
//当点击-图标时，执行减函数
$(".decrement").click(function() {
var n = $(this).siblings(".buynum").text();// 得到当前兄弟文本框的值
if (n == 1) {		//购物数量最少为1
return false;
}
console.log(n);
n--;
$(this).siblings(".buynum").text(n);//把n赋值给span之间文本	
						        
buynum = $('.buynum').text();//获取购买数量
console.log("获取到购买次数了"+buynum);
});
						
var drug_id = <%=rsDrug.getString("drug_id")%>;	//这是我从数据库获取的字段drug_id,定义一个drug_id变量接收，和本文重点无关
		
document.write('<div class="btns clearfix">');
document.write('<a href="buy_confirm.jsp" οnclick="f('+drug_id+'); return false;"><p class="buy fl">立即购买</p></a>');  
document.write('</div>');

//定义一个获取购买数量函数f()
function f(drug_id)
{
var r = document.getElementById("buynum").innerHTML; //这里才能获取整个页面span之间最终的文本内容，上面两个加减函数里的buynum 仅在它们函数内部起作用，外面获取不到的
//alert("buy_confirm.jsp?drug_id="+drug_id+"&buynum="+r);
location.href="buy_confirm.jsp?drug_id="+drug_id+"&buynum="+r;//还是熟悉的跳转，熟悉的传值
//点击立即购买就会触发这个函数，并且跳转传值
 }
 
</script>