继上一篇文章后,我又有了新的需求。
还是要获取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>