账号密码登录
微信安全登录
微信扫描二维码登录

登录后绑定QQ、微信即可实现信息互通

手机验证码登录
找回密码返回
邮箱找回 手机找回
注册账号返回
其他登录方式
分享
  • 收藏
    X
    关于改变商品的数量后,JS无法正确获取动态改变数量的input的value
    39
    0

    目前遇到一个问题,很奇怪,虚心求教是不是我什么地方写的不对。是关于商品中,改变了欲购买商品数量后,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。

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

    0
    打赏
    收藏
    点击回答
    您的回答被采纳后将获得:提问者悬赏的 10 元积分
        全部回答
    • 0
    • 慾朢變得荒傏 普通会员 1楼

      在JavaScript中,如果你想获取动态改变数量的输入的value,你需要使用JavaScript的MutationObserver API来监听DOM的变化。以下是一个简单的示例:

      ```javascript // 获取input元素 const input = document.querySelector('#input-id');

      // 创建一个MutationObserver实例 const observer = new MutationObserver(function(mutationsList) { // 当新的元素添加到DOM时,执行该函数 mutationsList.forEach(function(mutation) { // 如果元素的类型是input,并且它的value属性发生了改变 if (mutation.type === 'childList' && mutation.target.value !== '') { // 获取元素的value属性 const value = mutation.target.value; console.log('New value:', value); } }); });

      // 监听元素的change事件 observer.observe(input, {childList: true, subtree: true});

      // 在需要获取新值时,调用getNewValue方法 document.querySelector('#input-id').getNewValue(); ```

      在这个示例中,我们首先获取了input元素,然后创建了一个MutationObserver实例。当新的元素添加到DOM时,我们使用forEach方法来遍历所有的MutationObserver实例,如果元素的类型是input,并且它的value属性发生了改变,我们就获取元素的value属性,并打印出来。

      注意,你需要将#input-id替换为你的input元素的实际ID。

    更多回答
    扫一扫访问手机版
    • 回到顶部
    • 回到顶部