关于改变商品的数量后,JS无法正确获取动态改变数量的input的value

目前遇到一个问题,很奇怪,虚心求教是不是我什么地方写的不对。是关于商品中,改变了欲购买商品数量后,JS无法正确获取这个数量的input的value,代码如下:

HTML中:

<span class="reduce" tapmode onclick="reduce(this);">-</span>
<input type="number" class="count-input" value="1" min="1" max="10" stock="" onKeyUp="keyUp(this)">
<span class="add" tapmode onclick="add(this);">+</span>

<a onClick="goToCart();">加入购物车</a>

JS中:

// 手动输入数量
function keyUp(obj){
    obj.value=obj.value.replace(/\D/g,'');
    if($(obj).val() <= 0) {
      layer.open({content: '数量超出范围',skin: 'msg',time: 2 });
      $(obj).val('1');
      $(obj).attr('value','1');
    }else if (Number($(obj).val()) > Number($(obj).attr('stock'))) {
      layer.open({content: '数量超出范围',skin: 'msg',time: 2 });
      $(obj).val($(obj).attr('stock'));
      $(obj).attr('value',$(obj).attr('stock'));
    }
}

// 数量增加
function add(obj){
  var n = $(obj).prev().val();
  var stock = Number($('.count-input').attr('stock'));
  var num = parseInt(n) + 1;
  if (num > stock) {
    layer.open({content: '数量超出范围',skin: 'msg',time: 2 });
    return;
  }
  $(obj).prev().val(num);
  $(obj).prev().attr('value',num);
}
// 数量减少
function reduce(obj){
  var n = $(obj).next().val();
  var num = parseInt(n) - 1;
  if (num <= 0) {
    layer.open({content: '数量超出范围',skin: 'msg',time: 2 });
    return;
  }
  $(obj).next().val(num);
  $(obj).next().attr('value',num);
}

// 加入购物车
function goToCart(){
  var goods_num = $('.count-input').val();
      alert(goods_num);
}

其中每个方法中最后关于attr给value赋值,是因为我发现在动态改变数量时候,虽然界面显示上改变了数量,但是实际通过浏览器的F12调试中查看数量input,发现还是原来的初始值1,所以我才加了个attr,让数量的input能在调试中也能动态改变value。然后诡异的来了,在加入购物车方法中,alert展示的永远都是初始值1,并不能正确获取动态改变了数量的input 的value。

求教,是否是我哪里写的有问题?还请不吝赐教,谢谢~

阅读 2.3k
3 个回答

加一个判断吧:

function goToCart(){
  var goods_num = $('.count-input').val();
     if(goods_num !== 1){
        alert(goods_num);
     }
}

图片描述

@夕水
不行呀~还是弹出的初始值,好奇怪啊~

add()和reduce()方法中,都会触发if的条件,然后if里面有return语句,就直接结束了函数,后面的语句就不会执行了,所以input里面的值一直都是初始值1

撰写回答
你尚未登录,登录后可以
  • 和开发者交流问题的细节
  • 关注并接收问题和回答的更新提醒
  • 参与内容的编辑和改进,让解决方法与时俱进
推荐问题